@radix-ui/themes/src/components/progress.css

[](https://radix-ui.com/themes)

.rt-ProgressRoot {
  --progress-value: 0;
  --progress-duration: 5s;
  pointer-events: none;
  position: relative;
  overflow: hidden;
  flex-grow: 1;
  height: var(--progress-height);
  border-radius: max(
    calc(var(--radius-factor) * var(--progress-height) / 3),
    calc(var(--radius-factor) * var(--radius-thumb))
  );

  /* A pseudo-element for shadows */
  &::after {
    position: absolute;
    inset: 0;
    content: '';
    border-radius: inherit;
  }
}

:where(.radix-themes) {
  --progress-indicator-after-linear-gradient: var(--white-a5), var(--white-a9), var(--white-a5);
}
:is(.dark, .dark-theme),
:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
  --progress-indicator-after-linear-gradient: var(--white-a3), var(--white-a6), var(--white-a3);
}
.rt-ProgressIndicator {
  display: block;
  height: 100%;
  width: 100%;

  transform: scaleX(calc(var(--progress-value) / 100));
  transform-origin: left center;
  transition: transform 120ms;

  &:where([data-state='indeterminate']) {
    animation-name: rt-progress-indicator-indeterminate-grow, var(--progress-indicator-indeterminate-animation-start),
      var(--progress-indicator-indeterminate-animation-repeat);
    animation-delay: 0s, calc(var(--progress-duration) + 5s), calc(var(--progress-duration) + 7.5s);
    animation-duration: var(--progress-duration), 2.5s, 5s;
    animation-iteration-count: 1, 1, infinite;
    animation-fill-mode: both, none, none;
    animation-direction: normal, normal, alternate;

    /* A pseudo-element for a shine animation */
    &::after {
      position: absolute;
      inset: 0;
      content: '';
      width: 400%;

      animation-name: rt-progress-indicator-indeterminate-shine-from-left;
      animation-delay: calc(var(--progress-duration) + 5s);
      animation-duration: 5s;
      animation-fill-mode: backwards;
      animation-iteration-count: infinite;

      background-image: linear-gradient(
        to right,
        transparent 25%,
        var(--progress-indicator-after-linear-gradient),
        transparent 75%
      );
    }
  }
}

@keyframes rt-progress-indicator-indeterminate-grow {
  0% {
    transform: scaleX(0.01);
  }
  20% {
    transform: scaleX(0.1);
  }
  30% {
    transform: scaleX(0.6);
  }
  40%,
  50% {
    transform: scaleX(0.9);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes rt-progress-indicator-indeterminate-shine-from-left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}

/***************************************************************************************************
 *                                                                                                 *
 * SIZES                                                                                           *
 *                                                                                                 *
 ***************************************************************************************************/

@breakpoints {
  .rt-ProgressRoot {
    &:where(.rt-r-size-1) {
      --progress-height: var(--space-1);
    }
    &:where(.rt-r-size-2) {
      --progress-height: calc(var(--space-2) * 0.75);
    }
    &:where(.rt-r-size-3) {
      --progress-height: var(--space-2);
    }
  }
}

/***************************************************************************************************
 *                                                                                                 *
 * VARIANTS                                                                                        *
 *                                                                                                 *
 ***************************************************************************************************/

/* surface */

.rt-ProgressRoot:where(.rt-variant-surface) {
  --progress-indicator-indeterminate-animation-start: rt-progress-indicator-surface-indeterminate-fade;
  --progress-indicator-indeterminate-animation-repeat: rt-progress-indicator-surface-indeterminate-pulse;
  background-color: var(--gray-a3);

  &::after {
    box-shadow: inset 0 0 0 1px var(--gray-a4);
  }

  & :where(.rt-ProgressIndicator) {
    background-color: var(--accent-track);
  }
}

@keyframes rt-progress-indicator-surface-indeterminate-fade {
  100% {
    background-color: var(--accent-7);
  }
}

@keyframes rt-progress-indicator-surface-indeterminate-pulse {
  0% {
    background-color: var(--accent-7);
  }
  100% {
    background-color: var(--accent-track);
  }
}

/* classic */

.rt-ProgressRoot:where(.rt-variant-classic) {
  --progress-indicator-indeterminate-animation-start: rt-progress-indicator-classic-indeterminate-fade;
  --progress-indicator-indeterminate-animation-repeat: rt-progress-indicator-classic-indeterminate-pulse;
  background-color: var(--gray-a3);

  &::after {
    box-shadow: var(--shadow-1);
  }

  & :where(.rt-ProgressIndicator) {
    background-color: var(--accent-track);
  }
}

@keyframes rt-progress-indicator-classic-indeterminate-fade {
  100% {
    background-color: var(--accent-7);
  }
}

@keyframes rt-progress-indicator-classic-indeterminate-pulse {
  0% {
    background-color: var(--accent-7);
  }
  100% {
    background-color: var(--accent-track);
  }
}

/* soft */

.rt-ProgressRoot:where(.rt-variant-soft) {
  --progress-indicator-indeterminate-animation-start: rt-progress-indicator-soft-indeterminate-fade;
  --progress-indicator-indeterminate-animation-repeat: rt-progress-indicator-soft-indeterminate-pulse;
  background-color: var(--gray-a4);
  /* Blend with white to increase contrast in dark mode */
  background-image: linear-gradient(var(--white-a1), var(--white-a1));

  & :where(.rt-ProgressIndicator) {
    background-image: linear-gradient(var(--accent-a5), var(--accent-a5));
    background-color: var(--accent-8);

    &::after {
      opacity: 0.75;
    }
  }
}

@keyframes rt-progress-indicator-soft-indeterminate-fade {
  100% {
    background-color: var(--accent-5);
  }
}

@keyframes rt-progress-indicator-soft-indeterminate-pulse {
  0% {
    background-color: var(--accent-5);
  }
  100% {
    background-color: var(--accent-7);
  }
}

/* all high-contrast */
.rt-ProgressRoot:where(.rt-high-contrast) {
  --progress-indicator-indeterminate-animation-start: rt-progress-indicator-high-contrast-indeterminate-fade;
  --progress-indicator-indeterminate-animation-repeat: rt-progress-indicator-high-contrast-indeterminate-pulse;

  & :where(.rt-ProgressIndicator) {
    background-color: var(--accent-12);

    &::after {
      opacity: 0.75;
    }
  }
}

@keyframes rt-progress-indicator-high-contrast-indeterminate-fade {
  100% {
    opacity: 0.8;
  }
}

@keyframes rt-progress-indicator-high-contrast-indeterminate-pulse {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}