.progress-circular {
  --helper-theme: var(--theme-rgb, var(--primary-rgb, 33, 150, 243));
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  border: none;
  border-radius: 50%;
  padding: 0.25em;
  width: 3em;
  height: 3em;
  color: rgb(var(--helper-theme));
  background-color: transparent;
  font-size: calc(var(--font-size, 18px) + 2px);
  overflow: hidden;
}

.progress-circular::-webkit-progress-bar {
  background-color: transparent;
}

/* Indeterminate */
.progress-circular:indeterminate {
  animation: progress-circular 6s infinite cubic-bezier(0.3, 0.6, 1, 1);
}

:-ms-lang(x),
.progress-circular:indeterminate {
  animation: none;
}

.progress-circular:indeterminate::before,
.progress-circular:indeterminate::-webkit-progress-value {
  content: '';
  display: block;
  box-sizing: border-box;
  margin-bottom: 0.25em;
  border: solid 0.25em currentColor;
  border-radius: 50%;
  width: 100% !important;
  height: 100%;
  background-color: transparent;
  -webkit-clip-path: polygon(50% 50%, 37% 0, 50% 0, 50% 0, 50% 0, 50% 0);
  clip-path: polygon(50% 50%, 37% 0, 50% 0, 50% 0, 50% 0, 50% 0);
  animation: progress-circular-pseudo 0.75s infinite linear alternate;
  animation-play-state: inherit;
  animation-delay: inherit;
}

.progress-circular:indeterminate::-moz-progress-bar {
  box-sizing: border-box;
  border: solid 0.25em currentColor;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background-color: transparent;
  clip-path: polygon(50% 50%, 37% 0, 50% 0, 50% 0, 50% 0, 50% 0);
  animation: progress-circular-pseudo 0.75s infinite linear alternate;
  animation-play-state: inherit;
  animation-delay: inherit;
}

.progress-circular:indeterminate::-ms-fill {
  animation-name: -ms-ring;
}

@keyframes progress-circular {
  0% {
    transform: rotate(0deg);
  }
  12.5% {
    transform: rotate(180deg);
    animation-timing-function: linear;
  }
  25% {
    transform: rotate(630deg);
  }
  37.5% {
    transform: rotate(810deg);
    animation-timing-function: linear;
  }
  50% {
    transform: rotate(1260deg);
  }
  62.5% {
    transform: rotate(1440deg);
    animation-timing-function: linear;
  }
  75% {
    transform: rotate(1890deg);
  }
  87.5% {
    transform: rotate(2070deg);
    animation-timing-function: linear;
  }
  100% {
    transform: rotate(2520deg);
  }
}

@keyframes progress-circular-pseudo {
  0% {
    -webkit-clip-path: polygon(50% 50%, 37% 0, 50% 0, 50% 0, 50% 0, 50% 0);
    clip-path: polygon(50% 50%, 37% 0, 50% 0, 50% 0, 50% 0, 50% 0);
  }
  18% {
    -webkit-clip-path: polygon(50% 50%, 37% 0, 100% 0, 100% 0, 100% 0, 100% 0);
    clip-path: polygon(50% 50%, 37% 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  53% {
    -webkit-clip-path: polygon(
      50% 50%,
      37% 0,
      100% 0,
      100% 100%,
      100% 100%,
      100% 100%
    );
    clip-path: polygon(50% 50%, 37% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  88% {
    -webkit-clip-path: polygon(
      50% 50%,
      37% 0,
      100% 0,
      100% 100%,
      0 100%,
      0 100%
    );
    clip-path: polygon(50% 50%, 37% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(
      50% 50%,
      37% 0,
      100% 0,
      100% 100%,
      0 100%,
      0 63%
    );
    clip-path: polygon(50% 50%, 37% 0, 100% 0, 100% 100%, 0 100%, 0 63%);
  }
}