vuestic-ui/dist/esm-node/VaProgressCircle.css

Vue 3 UI Framework

:root,
:host {
  /* Circle */
  --va-progress-circle-position: relative;
  --va-progress-circle-overflow: hidden;
  /* Circle Wrapper */
  --va-progress-circle-width: 80%;
  --va-progress-circle-height: 80%;
  /* Circle Overlay */
  --va-progress-circle-overlay-transition: all ease 2s;
  /* Circle Info */
  --va-progress-circle-font-size: 0.75rem;
}
.va-progress-circle {
  position: var(--va-progress-circle-position);
  overflow: var(--va-progress-circle-overflow);
  font-family: var(--va-font-family);
}
.va-progress-circle__wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transform: rotate(-90deg);
  width: var(--va-progress-circle-width);
  height: var(--va-progress-circle-height);
  display: flex;
  justify-content: center;
  align-items: center;
}
.va-progress-circle--indeterminate .va-progress-circle__wrapper {
  animation: va-progress-circle__wrapper--indeterminate 2s linear infinite;
}
.va-progress-circle__overlay {
  transition: var(--va-progress-circle-overlay-transition);
}
.va-progress-circle--indeterminate .va-progress-circle__overlay {
  animation: va-progress-circle__overlay--indeterminate 2s ease-in-out infinite;
}
.va-progress-circle__info {
  font-size: var(--va-progress-circle-font-size);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@keyframes va-progress-circle__wrapper--indeterminate {
100% {
    transform: rotate(270deg);
}
}
@keyframes va-progress-circle__overlay--indeterminate {
0% {
    stroke-dasharray: 1, 125;
    stroke-dashoffset: 0;
}
50% {
    stroke-dasharray: 125, 125;
    stroke-dashoffset: -65px;
}
100% {
    stroke-dasharray: 125, 125;
    stroke-dashoffset: -125px;
}
}