
.animSpinnerIndeterminate, .progressCircle.progressIndeterminate::before {
  will-change: transform;
  animation: spinner-indeterminate 0.8S linear infinite;
}

@keyframes spinner-indeterminate {  0% {
    transform: rotate(0deg);
  }

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

.progressCircle {
  display: block;
  position: relative;
  vertical-align: middle;
}

.progressCircle.progressDeterminate {
  position: relative;
}

.progressCircle.progressDeterminate svg {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotate(270deg);
}

.progressCircle.progressDeterminate circle {
  fill: none;
}

.progressCircle.progressDeterminate circle:nth-of-type(1) {
  stroke: #ecedee;
}

.progressCircle.progressDeterminate circle:nth-of-type(2) {
  stroke-alignment: inner;
  stroke-dashoffset: 0;
  stroke-miterlimit: 100;
  stroke: #006fcf;
  transition: stroke-dasharray 0.25S ease-out;
  will-change: stroke-dasharray;
}

.progressCircle.progressDeterminate .progressValue {
  color: #006fcf;
  line-height: 1;
  margin-top: -0.5Em;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
}

.progressCircle.progressDeterminate .progressValue:empty::before {
  content: counter(count);
}

.progressCircle.progressDeterminate .progressValue.percent::after {
  content: "%";
}

.progressCircle.progressDeterminate {
  height: 50px;
  width: 50px;
}

.progressCircle.progressDeterminate circle {
  r: 23px;
  stroke-width: 4px;
}

.progressCircle.progressDeterminate circle:nth-of-type(2) {
  stroke-width: 4px;
}

.progressCircle.progressDeterminate .progressValue {
  font-size: 0.9375rem;
}

.progressCircle.progressDeterminate.progressSm {
  height: 20px;
  width: 20px;
}

.progressCircle.progressDeterminate.progressSm circle {
  r: 9px;
  stroke-width: 2px;
}

.progressCircle.progressDeterminate.progressSm circle:nth-of-type(2) {
  stroke-width: 2px;
}

.progressCircle.progressDeterminate.progressSm .progressValue {
  font-size: 0.65625rem;
}

.progressCircle.progressDeterminate.progressLg {
  height: 70px;
  width: 70px;
}

.progressCircle.progressDeterminate.progressLg circle {
  r: 32px;
  stroke-width: 6px;
}

.progressCircle.progressDeterminate.progressLg circle:nth-of-type(2) {
  stroke-width: 6px;
}

.progressCircle.progressDeterminate.progressLg .progressValue {
  font-size: 0.9375rem;
}

.progressCircle.progressIndeterminate {
  align-items: center;
  display: inline-flex;
}

.progressCircle.progressIndeterminate::before {
  content: "";
  border-style: solid;
  border-color: #006fcf;
  border-left-color: transparent;
  border-radius: 50%;
  display: block;
  position: relative;
  transform: translateZ(0);
}

.progressCircle.progressIndeterminate::before {
  border-width: 4px;
  height: 50px;
  width: 50px;
}

.progressCircle.progressIndeterminate.progressSm::before {
  border-width: 2px;
  height: 20px;
  width: 20px;
}

.progressCircle.progressIndeterminate.progressLg::before {
  border-width: 6px;
  height: 70px;
  width: 70px;
}