@adobe/spectrum-css/dist/components/progresscircle/index-vars.css

The Spectrum CSS top-level backwards compatible package

.spectrum-ProgressCircle--indeterminate-fill-submask-2 {
  animation: 1s infinite linear spectrum-fill-mask-2;
}

@keyframes spectrum-fill-mask-1 {
  0% {
    transform: rotate(90deg);
  }

  1.69% {
    transform: rotate(72.3deg);
  }

  3.39% {
    transform: rotate(55.5deg);
  }

  5.08% {
    transform: rotate(40.3deg);
  }

  6.78% {
    transform: rotate(25deg);
  }

  8.47% {
    transform: rotate(10.6deg);
  }

  10.17% {
    transform: rotate(0deg);
  }

  11.86% {
    transform: rotate(0deg);
  }

  13.56% {
    transform: rotate(0deg);
  }

  15.25% {
    transform: rotate(0deg);
  }

  16.95% {
    transform: rotate(0deg);
  }

  18.64% {
    transform: rotate(0deg);
  }

  20.34% {
    transform: rotate(0deg);
  }

  22.03% {
    transform: rotate(0deg);
  }

  23.73% {
    transform: rotate(0deg);
  }

  25.42% {
    transform: rotate(0deg);
  }

  27.12% {
    transform: rotate(0deg);
  }

  28.81% {
    transform: rotate(0deg);
  }

  30.51% {
    transform: rotate(0deg);
  }

  32.2% {
    transform: rotate(0deg);
  }

  33.9% {
    transform: rotate(0deg);
  }

  35.59% {
    transform: rotate(0deg);
  }

  37.29% {
    transform: rotate(0deg);
  }

  38.98% {
    transform: rotate(0deg);
  }

  40.68% {
    transform: rotate(0deg);
  }

  42.37% {
    transform: rotate(5.3deg);
  }

  44.07% {
    transform: rotate(13.4deg);
  }

  45.76% {
    transform: rotate(20.6deg);
  }

  47.46% {
    transform: rotate(29deg);
  }

  49.15% {
    transform: rotate(36.5deg);
  }

  50.85% {
    transform: rotate(42.6deg);
  }

  52.54% {
    transform: rotate(48.8deg);
  }

  54.24% {
    transform: rotate(54.2deg);
  }

  55.93% {
    transform: rotate(59.4deg);
  }

  57.63% {
    transform: rotate(63.2deg);
  }

  59.32% {
    transform: rotate(67.2deg);
  }

  61.02% {
    transform: rotate(70.8deg);
  }

  62.71% {
    transform: rotate(73.8deg);
  }

  64.41% {
    transform: rotate(76.2deg);
  }

  66.1% {
    transform: rotate(78.7deg);
  }

  67.8% {
    transform: rotate(80.6deg);
  }

  69.49% {
    transform: rotate(82.6deg);
  }

  71.19% {
    transform: rotate(83.7deg);
  }

  72.88% {
    transform: rotate(85deg);
  }

  74.58% {
    transform: rotate(86.3deg);
  }

  76.27% {
    transform: rotate(87deg);
  }

  77.97% {
    transform: rotate(87.7deg);
  }

  79.66% {
    transform: rotate(88.3deg);
  }

  81.36% {
    transform: rotate(88.6deg);
  }

  83.05% {
    transform: rotate(89.2deg);
  }

  84.75% {
    transform: rotate(89.2deg);
  }

  86.44% {
    transform: rotate(89.5deg);
  }

  88.14% {
    transform: rotate(89.9deg);
  }

  89.83% {
    transform: rotate(89.7deg);
  }

  91.53% {
    transform: rotate(90.1deg);
  }

  93.22% {
    transform: rotate(90.2deg);
  }

  94.92% {
    transform: rotate(90.1deg);
  }

  96.61% {
    transform: rotate(90deg);
  }

  98.31% {
    transform: rotate(89.8deg);
  }

  100% {
    transform: rotate(90deg);
  }
}

@keyframes spectrum-fill-mask-2 {
  0% {
    transform: rotate(180deg);
  }

  1.69% {
    transform: rotate(180deg);
  }

  3.39% {
    transform: rotate(180deg);
  }

  5.08% {
    transform: rotate(180deg);
  }

  6.78% {
    transform: rotate(180deg);
  }

  8.47% {
    transform: rotate(180deg);
  }

  10.17% {
    transform: rotate(179.2deg);
  }

  11.86% {
    transform: rotate(164deg);
  }

  13.56% {
    transform: rotate(151.8deg);
  }

  15.25% {
    transform: rotate(140.8deg);
  }

  16.95% {
    transform: rotate(130.3deg);
  }

  18.64% {
    transform: rotate(120.4deg);
  }

  20.34% {
    transform: rotate(110.8deg);
  }

  22.03% {
    transform: rotate(101.6deg);
  }

  23.73% {
    transform: rotate(93.5deg);
  }

  25.42% {
    transform: rotate(85.4deg);
  }

  27.12% {
    transform: rotate(78.1deg);
  }

  28.81% {
    transform: rotate(71.2deg);
  }

  30.51% {
    transform: rotate(89.1deg);
  }

  32.2% {
    transform: rotate(105.5deg);
  }

  33.9% {
    transform: rotate(121.3deg);
  }

  35.59% {
    transform: rotate(135.5deg);
  }

  37.29% {
    transform: rotate(148.4deg);
  }

  38.98% {
    transform: rotate(161deg);
  }

  40.68% {
    transform: rotate(173.5deg);
  }

  42.37% {
    transform: rotate(180deg);
  }

  44.07% {
    transform: rotate(180deg);
  }

  45.76% {
    transform: rotate(180deg);
  }

  47.46% {
    transform: rotate(180deg);
  }

  49.15% {
    transform: rotate(180deg);
  }

  50.85% {
    transform: rotate(180deg);
  }

  52.54% {
    transform: rotate(180deg);
  }

  54.24% {
    transform: rotate(180deg);
  }

  55.93% {
    transform: rotate(180deg);
  }

  57.63% {
    transform: rotate(180deg);
  }

  59.32% {
    transform: rotate(180deg);
  }

  61.02% {
    transform: rotate(180deg);
  }

  62.71% {
    transform: rotate(180deg);
  }

  64.41% {
    transform: rotate(180deg);
  }

  66.1% {
    transform: rotate(180deg);
  }

  67.8% {
    transform: rotate(180deg);
  }

  69.49% {
    transform: rotate(180deg);
  }

  71.19% {
    transform: rotate(180deg);
  }

  72.88% {
    transform: rotate(180deg);
  }

  74.58% {
    transform: rotate(180deg);
  }

  76.27% {
    transform: rotate(180deg);
  }

  77.97% {
    transform: rotate(180deg);
  }

  79.66% {
    transform: rotate(180deg);
  }

  81.36% {
    transform: rotate(180deg);
  }

  83.05% {
    transform: rotate(180deg);
  }

  84.75% {
    transform: rotate(180deg);
  }

  86.44% {
    transform: rotate(180deg);
  }

  88.14% {
    transform: rotate(180deg);
  }

  89.83% {
    transform: rotate(180deg);
  }

  91.53% {
    transform: rotate(180deg);
  }

  93.22% {
    transform: rotate(180deg);
  }

  94.92% {
    transform: rotate(180deg);
  }

  96.61% {
    transform: rotate(180deg);
  }

  98.31% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

@keyframes spectrum-fills-rotate {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.spectrum-ProgressCircle {
  display: inline-block;
  width: var(--spectrum-progresscircle-medium-width, var(--spectrum-global-dimension-size-400));
  height: var(--spectrum-progresscircle-medium-height, var(--spectrum-global-dimension-size-400));
  position: relative;
  direction: ltr;
}

.spectrum-ProgressCircle-track {
  box-sizing: border-box;
  width: var(--spectrum-progresscircle-medium-width, var(--spectrum-global-dimension-size-400));
  height: var(--spectrum-progresscircle-medium-height, var(--spectrum-global-dimension-size-400));
  border-style: solid;
  border-width: var(--spectrum-progresscircle-medium-border-size);
  border-radius: var(--spectrum-progresscircle-medium-width, var(--spectrum-global-dimension-size-400));
}

[dir="ltr"] .spectrum-ProgressCircle-fills {
  left: 0;
}

[dir="rtl"] .spectrum-ProgressCircle-fills {
  right: 0;
}

.spectrum-ProgressCircle-fills {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.spectrum-ProgressCircle-fill {
  box-sizing: border-box;
  width: var(--spectrum-progresscircle-medium-width, var(--spectrum-global-dimension-size-400));
  height: var(--spectrum-progresscircle-medium-height, var(--spectrum-global-dimension-size-400));
  border-style: solid;
  border-width: var(--spectrum-progresscircle-medium-border-size);
  border-radius: var(--spectrum-progresscircle-medium-width, var(--spectrum-global-dimension-size-400));
}

.spectrum-ProgressCircle-fillMask1,
.spectrum-ProgressCircle-fillMask2 {
  width: 50%;
  height: 100%;
  transform-origin: 100% center;
  transform: rotate(180deg);
  overflow: hidden;
  position: absolute;
}

.spectrum-ProgressCircle-fillSubMask1,
.spectrum-ProgressCircle-fillSubMask2 {
  width: 100%;
  height: 100%;
  transform-origin: 100% center;
  overflow: hidden;
  transform: rotate(-180deg);
}

.spectrum-ProgressCircle-fillMask2 {
  transform: rotate(0deg);
}

.spectrum-ProgressCircle--small {
  width: var(--spectrum-progresscircle-small-width, var(--spectrum-global-dimension-size-200));
  height: var(--spectrum-progresscircle-small-height, var(--spectrum-global-dimension-size-200));
}

.spectrum-ProgressCircle--small .spectrum-ProgressCircle-track {
    width: var(--spectrum-progresscircle-small-width, var(--spectrum-global-dimension-size-200));
    height: var(--spectrum-progresscircle-small-height, var(--spectrum-global-dimension-size-200));
    border-style: solid;
    border-width: var(--spectrum-progresscircle-small-border-size);
    border-radius: var(--spectrum-progresscircle-small-width, var(--spectrum-global-dimension-size-200));
  }

.spectrum-ProgressCircle--small .spectrum-ProgressCircle-fill {
    width: var(--spectrum-progresscircle-small-width, var(--spectrum-global-dimension-size-200));
    height: var(--spectrum-progresscircle-small-height, var(--spectrum-global-dimension-size-200));
    border-style: solid;
    border-width: var(--spectrum-progresscircle-small-border-size);
    border-radius: var(--spectrum-progresscircle-small-width, var(--spectrum-global-dimension-size-200));
  }

.spectrum-ProgressCircle--large {
  width: var(--spectrum-progresscircle-large-width, var(--spectrum-global-dimension-size-800));
  height: var(--spectrum-progresscircle-large-height, var(--spectrum-global-dimension-size-800));
}

.spectrum-ProgressCircle--large .spectrum-ProgressCircle-track {
    width: var(--spectrum-progresscircle-large-width, var(--spectrum-global-dimension-size-800));
    height: var(--spectrum-progresscircle-large-height, var(--spectrum-global-dimension-size-800));
    border-style: solid;
    border-width: var(--spectrum-progresscircle-large-border-size, var(--spectrum-global-dimension-size-50));
    border-radius: var(--spectrum-progresscircle-large-width, var(--spectrum-global-dimension-size-800));
  }

.spectrum-ProgressCircle--large .spectrum-ProgressCircle-fill {
    width: var(--spectrum-progresscircle-large-width, var(--spectrum-global-dimension-size-800));
    height: var(--spectrum-progresscircle-large-height, var(--spectrum-global-dimension-size-800));
    border-style: solid;
    border-width: var(--spectrum-progresscircle-large-border-size, var(--spectrum-global-dimension-size-50));
    border-radius: var(--spectrum-progresscircle-large-width, var(--spectrum-global-dimension-size-800));
  }

.spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fills {
    will-change: transform;
    transform: translateZ(0);
    animation: 1s infinite cubic-bezier(0.25, 0.78, 0.48, 0.89)
      spectrum-fills-rotate;
    transform-origin: center;
  }

.spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask1 {
    will-change: transform;
    transform: translateZ(0);
    animation: 1s infinite linear spectrum-fill-mask-1;
  }

.spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask2 {
    will-change: transform;
    transform: translateZ(0);
    animation: 1s infinite linear spectrum-fill-mask-2;
  }

.spectrum-ProgressCircle-track {
  border-color: var(--spectrum-progresscircle-medium-track-color, var(--spectrum-alias-track-color-default));
}

.spectrum-ProgressCircle-fill {
  border-color: var(--spectrum-progresscircle-medium-track-fill-color, var(--spectrum-global-color-blue-500));
}

.spectrum-ProgressCircle--overBackground .spectrum-ProgressCircle-track {
    border-color: var(--spectrum-progresscircle-medium-over-background-track-color, var(--spectrum-alias-track-color-over-background));
  }

.spectrum-ProgressCircle--overBackground .spectrum-ProgressCircle-fill {
    border-color: var(--spectrum-progresscircle-medium-over-background-track-fill-color, var(--spectrum-global-color-static-white));
  }

.spectrum-ProgressCircle--indeterminate.spectrum-ProgressCircle--overBackground .spectrum-ProgressCircle-track {
    border-color: var(--spectrum-progresscircle-medium-over-background-track-color, var(--spectrum-alias-track-color-over-background));
  }

.spectrum-ProgressCircle--indeterminate.spectrum-ProgressCircle--overBackground .spectrum-ProgressCircle-fill {
    border-color: var(--spectrum-progresscircle-medium-over-background-track-fill-color, var(--spectrum-global-color-static-white));
  }