.ve-progress-circular {
  animation-play-state: paused;
  transition: inherit;
}
.ve-progress-circular--active {
  animation-play-state: running;
}
.ve-progress-circular--indeterminate {
  animation-name: progress-circular-rotate;
  animation-duration: 1.4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: center center;
  transition: 0.2s ease-in-out;
  transition-property: stroke-dashoffset, stroke-dasharray, stroke-width;
}
.ve-progress-circular--indeterminate .ve-progress-circular__overlay {
  animation-name: progress-circular-dash;
  animation-play-state: inherit;
  animation-duration: 1.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  stroke-dasharray: 25, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
}
.ve-progress-circular__underlay, .ve-progress-circular__overlay {
  transform: scale(0.8);
  transform-origin: center center;
}
.ve-progress-circular__underlay {
  stroke: currentColor;
  stroke-opacity: var(--ve-border-opacity);
}
.ve-progress-circular__overlay {
  stroke: currentColor;
  transition: inherit;
  transition-property: stroke-dasharray, stroke-dashoffset, stroke-width;
}
.ve-icon > svg > .ve-progress-circular__overlay {
  stroke-opacity: var(--ve-medium-emphasis-opacity);
}

@keyframes progress-circular-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 100, 200;
    stroke-dashoffset: -15px;
  }
  100% {
    stroke-dasharray: 100, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes progress-circular-rotate {
  100% {
    transform: rotate(270deg);
  }
}