@gravity-ui/uikit/build/esm/components/Progress/Progress.css

Gravity UI base styling and components

.g-progress {
  --_--empty-background-color: var(--g-color-base-generic);
  --_--empty-text-color: var(--g-color-text-primary);
  --_--filled-text-color: var(--g-color-text-primary);
  --_--filled-background-color: var(--g-color-base-neutral-medium);
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 3px;
  background-color: var(--g-progress-empty-background-color, var(--_--empty-background-color));
  text-align: center;
}
.g-progress__text {
  font-size: var(--g-text-body-short-font-size);
  font-weight: var(--g-text-body-font-weight);
  font-family: var(--g-text-body-font-family);
  padding: 0 10px;
  box-sizing: border-box;
  position: relative;
  color: var(--g-progress-empty-text-color, var(--_--empty-text-color));
}
.g-progress__text-inner {
  font-size: var(--g-text-body-short-font-size);
  font-weight: var(--g-text-body-font-weight);
  font-family: var(--g-text-body-font-family);
  padding: 0 10px;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  color: var(--g-progress-filled-text-color, var(--_--empty-text-color));
  transition: transform 0.6s ease;
}
.g-progress__item {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.6s ease, width 0.6s ease, background-color 0.6s ease;
  background-color: var(--g-progress-filled-background-color, var(--_--filled-background-color));
}
[dir=rtl] .g-progress__item {
  float: right;
}
.g-progress__item_theme_default {
  --_--filled-background-color: var(--g-color-base-neutral-medium);
}
.g-progress__item_theme_success {
  --_--filled-background-color: var(--g-color-base-positive-medium);
}
.g-progress__item_theme_warning {
  --_--filled-background-color: var(--g-color-base-warning-medium);
}
.g-progress__item_theme_danger {
  --_--filled-background-color: var(--g-color-base-danger-medium);
}
.g-progress__item_theme_info {
  --_--filled-background-color: var(--g-color-base-info-medium);
}
.g-progress__item_theme_misc {
  --_--filled-background-color: var(--g-color-base-misc-medium);
}
.g-progress__item_loading {
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 4px, transparent 4px, transparent 8px);
  background-size: 150%;
  background-clip: padding-box;
  animation: g-loading-animation 0.5s linear infinite;
}
.g-progress__stack {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  color: var(--g-color-text-light-primary);
  transition: transform 0.6s ease;
}
.g-progress_size_m {
  height: 20px;
  line-height: 20px;
}
.g-progress_size_m .g-progress__stack {
  height: 20px;
  line-height: 20px;
}
.g-progress_size_m .g-progress__text {
  height: 20px;
  margin-block-end: -20px;
}
.g-progress_size_s {
  height: 10px;
  line-height: 10px;
}
.g-progress_size_s .g-progress__stack {
  height: 10px;
  line-height: 10px;
}
.g-progress_size_xs {
  height: 4px;
  line-height: 4px;
}
.g-progress_size_xs .g-progress__stack {
  height: 4px;
  line-height: 4px;
}
.g-progress_size_s .g-progress__text, .g-progress_size_s .g-progress__text-inner, .g-progress_size_xs .g-progress__text, .g-progress_size_xs .g-progress__text-inner {
  display: none;
}