.chart {
  position: relative;
  width: 100px;
  height: 100px;
  margin: auto;
  font-size: 1.2em;
  border-radius: 50%;
  box-shadow: inset 0 0 0px 10px #e8e8e8;
  overflow: hidden;
}

.chart:before {
  content: attr(data-percentage) "%";
  display: block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 50%;
}

/*
.percentage {
  position: relative;
  top: 16px;
  height: 13px;
  overflow: hidden;

  &:before,
  &:after {
    position: absolute;
    white-space: pre;
  }

  &::before {
    content: "0 \a 1 \a 2 \a 3 \a 4 \a 5 \a 6 \a 7 \a 8 \a 9";
    left: 16px;
    animation: tens $time 1 steps(10, end);
  }

  &::after {
    content: "0 \a 1 \a 2 \a 3 \a 4 \a 5 \a 6 \a 7 \a 8 \a 9";
    right: 16px;
    animation: ones $time/10 6 steps(10, end);
  }
}
*/

@-webkit-keyframes tens {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-160px);
  }
}

@keyframes tens {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-160px);
  }
}

@-webkit-keyframes ones {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-160px);
  }
}

@keyframes ones {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-160px);
  }
}

.completed {
  position: absolute;
  top: 0;
  left: 0;
}

.completed:before,
.completed:after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  box-shadow: inset 0 0 0px 10px #81348a
;
  border-radius: 50%;
}

.completed:before {
  clip: rect(0 100px 100px 50px);
}

.completed:after {
  clip: rect(0 50px 100px 0);
}

[data-percentage="0"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="0"] .completed.active:before {
  transform: rotate(-180deg);
  -webkit-animation: first-0 2s 1 ease-out;
          animation: first-0 2s 1 ease-out;
}

@-webkit-keyframes mask-0 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-0 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-0 {
  0% {
    transform: rotate(-180deg);
  }

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

@keyframes first-0 {
  0% {
    transform: rotate(-180deg);
  }

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

[data-percentage="1"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="1"] .completed.active:before {
  transform: rotate(-176.4deg);
  -webkit-animation: first-1 2s 1 ease-out;
          animation: first-1 2s 1 ease-out;
}

@-webkit-keyframes mask-1 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-1 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-1 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-176.4deg);
  }
}

@keyframes first-1 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-176.4deg);
  }
}

[data-percentage="2"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="2"] .completed.active:before {
  transform: rotate(-172.8deg);
  -webkit-animation: first-2 2s 1 ease-out;
          animation: first-2 2s 1 ease-out;
}

@-webkit-keyframes mask-2 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-2 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-2 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-172.8deg);
  }
}

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

  50%, 100% {
    transform: rotate(-172.8deg);
  }
}

[data-percentage="3"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="3"] .completed.active:before {
  transform: rotate(-169.2deg);
  -webkit-animation: first-3 2s 1 ease-out;
          animation: first-3 2s 1 ease-out;
}

@-webkit-keyframes mask-3 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-3 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-3 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-169.2deg);
  }
}

@keyframes first-3 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-169.2deg);
  }
}

[data-percentage="4"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="4"] .completed.active:before {
  transform: rotate(-165.6deg);
  -webkit-animation: first-4 2s 1 ease-out;
          animation: first-4 2s 1 ease-out;
}

@-webkit-keyframes mask-4 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-4 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-4 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-165.6deg);
  }
}

@keyframes first-4 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-165.6deg);
  }
}

[data-percentage="5"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="5"] .completed.active:before {
  transform: rotate(-162deg);
  -webkit-animation: first-5 2s 1 ease-out;
          animation: first-5 2s 1 ease-out;
}

@-webkit-keyframes mask-5 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-5 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-5 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-162deg);
  }
}

@keyframes first-5 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-162deg);
  }
}

[data-percentage="6"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="6"] .completed.active:before {
  transform: rotate(-158.4deg);
  -webkit-animation: first-6 2s 1 ease-out;
          animation: first-6 2s 1 ease-out;
}

@-webkit-keyframes mask-6 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-6 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-6 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-158.4deg);
  }
}

@keyframes first-6 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-158.4deg);
  }
}

[data-percentage="7"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="7"] .completed.active:before {
  transform: rotate(-154.8deg);
  -webkit-animation: first-7 2s 1 ease-out;
          animation: first-7 2s 1 ease-out;
}

@-webkit-keyframes mask-7 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-7 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-7 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-154.8deg);
  }
}

@keyframes first-7 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-154.8deg);
  }
}

[data-percentage="8"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="8"] .completed.active:before {
  transform: rotate(-151.2deg);
  -webkit-animation: first-8 2s 1 ease-out;
          animation: first-8 2s 1 ease-out;
}

@-webkit-keyframes mask-8 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-8 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-8 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-151.2deg);
  }
}

@keyframes first-8 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-151.2deg);
  }
}

[data-percentage="9"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="9"] .completed.active:before {
  transform: rotate(-147.6deg);
  -webkit-animation: first-9 2s 1 ease-out;
          animation: first-9 2s 1 ease-out;
}

@-webkit-keyframes mask-9 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-9 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-9 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-147.6deg);
  }
}

@keyframes first-9 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-147.6deg);
  }
}

[data-percentage="10"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="10"] .completed.active:before {
  transform: rotate(-144deg);
  -webkit-animation: first-10 2s 1 ease-out;
          animation: first-10 2s 1 ease-out;
}

@-webkit-keyframes mask-10 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-10 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-10 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-144deg);
  }
}

@keyframes first-10 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-144deg);
  }
}

[data-percentage="11"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="11"] .completed.active:before {
  transform: rotate(-140.4deg);
  -webkit-animation: first-11 2s 1 ease-out;
          animation: first-11 2s 1 ease-out;
}

@-webkit-keyframes mask-11 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-11 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-11 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-140.4deg);
  }
}

@keyframes first-11 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-140.4deg);
  }
}

[data-percentage="12"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="12"] .completed.active:before {
  transform: rotate(-136.8deg);
  -webkit-animation: first-12 2s 1 ease-out;
          animation: first-12 2s 1 ease-out;
}

@-webkit-keyframes mask-12 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-12 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-12 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-136.8deg);
  }
}

@keyframes first-12 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-136.8deg);
  }
}

[data-percentage="13"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="13"] .completed.active:before {
  transform: rotate(-133.2deg);
  -webkit-animation: first-13 2s 1 ease-out;
          animation: first-13 2s 1 ease-out;
}

@-webkit-keyframes mask-13 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-13 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-13 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-133.2deg);
  }
}

@keyframes first-13 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-133.2deg);
  }
}

[data-percentage="14"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="14"] .completed.active:before {
  transform: rotate(-129.6deg);
  -webkit-animation: first-14 2s 1 ease-out;
          animation: first-14 2s 1 ease-out;
}

@-webkit-keyframes mask-14 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-14 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-14 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-129.6deg);
  }
}

@keyframes first-14 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-129.6deg);
  }
}

[data-percentage="15"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="15"] .completed.active:before {
  transform: rotate(-126deg);
  -webkit-animation: first-15 2s 1 ease-out;
          animation: first-15 2s 1 ease-out;
}

@-webkit-keyframes mask-15 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-15 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-15 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-126deg);
  }
}

@keyframes first-15 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-126deg);
  }
}

[data-percentage="16"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="16"] .completed.active:before {
  transform: rotate(-122.4deg);
  -webkit-animation: first-16 2s 1 ease-out;
          animation: first-16 2s 1 ease-out;
}

@-webkit-keyframes mask-16 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-16 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-16 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-122.4deg);
  }
}

@keyframes first-16 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-122.4deg);
  }
}

[data-percentage="17"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="17"] .completed.active:before {
  transform: rotate(-118.8deg);
  -webkit-animation: first-17 2s 1 ease-out;
          animation: first-17 2s 1 ease-out;
}

@-webkit-keyframes mask-17 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-17 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-17 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-118.8deg);
  }
}

@keyframes first-17 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-118.8deg);
  }
}

[data-percentage="18"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="18"] .completed.active:before {
  transform: rotate(-115.2deg);
  -webkit-animation: first-18 2s 1 ease-out;
          animation: first-18 2s 1 ease-out;
}

@-webkit-keyframes mask-18 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-18 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-18 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-115.2deg);
  }
}

@keyframes first-18 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-115.2deg);
  }
}

[data-percentage="19"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="19"] .completed.active:before {
  transform: rotate(-111.6deg);
  -webkit-animation: first-19 2s 1 ease-out;
          animation: first-19 2s 1 ease-out;
}

@-webkit-keyframes mask-19 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-19 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-19 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-111.6deg);
  }
}

@keyframes first-19 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-111.6deg);
  }
}

[data-percentage="20"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="20"] .completed.active:before {
  transform: rotate(-108deg);
  -webkit-animation: first-20 2s 1 ease-out;
          animation: first-20 2s 1 ease-out;
}

@-webkit-keyframes mask-20 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-20 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-20 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-108deg);
  }
}

@keyframes first-20 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-108deg);
  }
}

[data-percentage="21"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="21"] .completed.active:before {
  transform: rotate(-104.4deg);
  -webkit-animation: first-21 2s 1 ease-out;
          animation: first-21 2s 1 ease-out;
}

@-webkit-keyframes mask-21 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-21 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-21 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-104.4deg);
  }
}

@keyframes first-21 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-104.4deg);
  }
}

[data-percentage="22"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="22"] .completed.active:before {
  transform: rotate(-100.8deg);
  -webkit-animation: first-22 2s 1 ease-out;
          animation: first-22 2s 1 ease-out;
}

@-webkit-keyframes mask-22 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-22 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-22 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-100.8deg);
  }
}

@keyframes first-22 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-100.8deg);
  }
}

[data-percentage="23"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="23"] .completed.active:before {
  transform: rotate(-97.2deg);
  -webkit-animation: first-23 2s 1 ease-out;
          animation: first-23 2s 1 ease-out;
}

@-webkit-keyframes mask-23 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-23 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-23 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-97.2deg);
  }
}

@keyframes first-23 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-97.2deg);
  }
}

[data-percentage="24"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="24"] .completed.active:before {
  transform: rotate(-93.6deg);
  -webkit-animation: first-24 2s 1 ease-out;
          animation: first-24 2s 1 ease-out;
}

@-webkit-keyframes mask-24 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-24 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-24 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-93.6deg);
  }
}

@keyframes first-24 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-93.6deg);
  }
}

[data-percentage="25"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="25"] .completed.active:before {
  transform: rotate(-90deg);
  -webkit-animation: first-25 2s 1 ease-out;
          animation: first-25 2s 1 ease-out;
}

@-webkit-keyframes mask-25 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-25 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-25 {
  0% {
    transform: rotate(-180deg);
  }

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

@keyframes first-25 {
  0% {
    transform: rotate(-180deg);
  }

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

[data-percentage="26"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="26"] .completed.active:before {
  transform: rotate(-86.4deg);
  -webkit-animation: first-26 2s 1 ease-out;
          animation: first-26 2s 1 ease-out;
}

@-webkit-keyframes mask-26 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-26 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-26 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-86.4deg);
  }
}

@keyframes first-26 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-86.4deg);
  }
}

[data-percentage="27"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="27"] .completed.active:before {
  transform: rotate(-82.8deg);
  -webkit-animation: first-27 2s 1 ease-out;
          animation: first-27 2s 1 ease-out;
}

@-webkit-keyframes mask-27 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-27 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-27 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-82.8deg);
  }
}

@keyframes first-27 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-82.8deg);
  }
}

[data-percentage="28"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="28"] .completed.active:before {
  transform: rotate(-79.2deg);
  -webkit-animation: first-28 2s 1 ease-out;
          animation: first-28 2s 1 ease-out;
}

@-webkit-keyframes mask-28 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-28 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-28 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-79.2deg);
  }
}

@keyframes first-28 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-79.2deg);
  }
}

[data-percentage="29"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="29"] .completed.active:before {
  transform: rotate(-75.6deg);
  -webkit-animation: first-29 2s 1 ease-out;
          animation: first-29 2s 1 ease-out;
}

@-webkit-keyframes mask-29 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-29 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-29 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-75.6deg);
  }
}

@keyframes first-29 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-75.6deg);
  }
}

[data-percentage="30"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="30"] .completed.active:before {
  transform: rotate(-72deg);
  -webkit-animation: first-30 2s 1 ease-out;
          animation: first-30 2s 1 ease-out;
}

@-webkit-keyframes mask-30 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-30 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-30 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-72deg);
  }
}

@keyframes first-30 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-72deg);
  }
}

[data-percentage="31"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="31"] .completed.active:before {
  transform: rotate(-68.4deg);
  -webkit-animation: first-31 2s 1 ease-out;
          animation: first-31 2s 1 ease-out;
}

@-webkit-keyframes mask-31 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-31 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-31 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-68.4deg);
  }
}

@keyframes first-31 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-68.4deg);
  }
}

[data-percentage="32"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="32"] .completed.active:before {
  transform: rotate(-64.8deg);
  -webkit-animation: first-32 2s 1 ease-out;
          animation: first-32 2s 1 ease-out;
}

@-webkit-keyframes mask-32 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-32 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-32 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-64.8deg);
  }
}

@keyframes first-32 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-64.8deg);
  }
}

[data-percentage="33"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="33"] .completed.active:before {
  transform: rotate(-61.2deg);
  -webkit-animation: first-33 2s 1 ease-out;
          animation: first-33 2s 1 ease-out;
}

@-webkit-keyframes mask-33 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-33 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-33 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-61.2deg);
  }
}

@keyframes first-33 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-61.2deg);
  }
}

[data-percentage="34"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="34"] .completed.active:before {
  transform: rotate(-57.6deg);
  -webkit-animation: first-34 2s 1 ease-out;
          animation: first-34 2s 1 ease-out;
}

@-webkit-keyframes mask-34 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-34 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-34 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-57.6deg);
  }
}

@keyframes first-34 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-57.6deg);
  }
}

[data-percentage="35"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="35"] .completed.active:before {
  transform: rotate(-54deg);
  -webkit-animation: first-35 2s 1 ease-out;
          animation: first-35 2s 1 ease-out;
}

@-webkit-keyframes mask-35 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-35 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-35 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-54deg);
  }
}

@keyframes first-35 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-54deg);
  }
}

[data-percentage="36"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="36"] .completed.active:before {
  transform: rotate(-50.4deg);
  -webkit-animation: first-36 2s 1 ease-out;
          animation: first-36 2s 1 ease-out;
}

@-webkit-keyframes mask-36 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-36 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-36 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-50.4deg);
  }
}

@keyframes first-36 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-50.4deg);
  }
}

[data-percentage="37"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="37"] .completed.active:before {
  transform: rotate(-46.8deg);
  -webkit-animation: first-37 2s 1 ease-out;
          animation: first-37 2s 1 ease-out;
}

@-webkit-keyframes mask-37 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-37 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-37 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-46.8deg);
  }
}

@keyframes first-37 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-46.8deg);
  }
}

[data-percentage="38"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="38"] .completed.active:before {
  transform: rotate(-43.2deg);
  -webkit-animation: first-38 2s 1 ease-out;
          animation: first-38 2s 1 ease-out;
}

@-webkit-keyframes mask-38 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-38 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-38 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-43.2deg);
  }
}

@keyframes first-38 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-43.2deg);
  }
}

[data-percentage="39"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="39"] .completed.active:before {
  transform: rotate(-39.6deg);
  -webkit-animation: first-39 2s 1 ease-out;
          animation: first-39 2s 1 ease-out;
}

@-webkit-keyframes mask-39 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-39 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-39 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-39.6deg);
  }
}

@keyframes first-39 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-39.6deg);
  }
}

[data-percentage="40"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="40"] .completed.active:before {
  transform: rotate(-36deg);
  -webkit-animation: first-40 2s 1 ease-out;
          animation: first-40 2s 1 ease-out;
}

@-webkit-keyframes mask-40 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-40 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-40 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-36deg);
  }
}

@keyframes first-40 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-36deg);
  }
}

[data-percentage="41"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="41"] .completed.active:before {
  transform: rotate(-32.4deg);
  -webkit-animation: first-41 2s 1 ease-out;
          animation: first-41 2s 1 ease-out;
}

@-webkit-keyframes mask-41 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-41 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-41 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-32.4deg);
  }
}

@keyframes first-41 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-32.4deg);
  }
}

[data-percentage="42"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="42"] .completed.active:before {
  transform: rotate(-28.8deg);
  -webkit-animation: first-42 2s 1 ease-out;
          animation: first-42 2s 1 ease-out;
}

@-webkit-keyframes mask-42 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-42 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-42 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-28.8deg);
  }
}

@keyframes first-42 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-28.8deg);
  }
}

[data-percentage="43"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="43"] .completed.active:before {
  transform: rotate(-25.2deg);
  -webkit-animation: first-43 2s 1 ease-out;
          animation: first-43 2s 1 ease-out;
}

@-webkit-keyframes mask-43 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-43 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-43 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-25.2deg);
  }
}

@keyframes first-43 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-25.2deg);
  }
}

[data-percentage="44"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="44"] .completed.active:before {
  transform: rotate(-21.6deg);
  -webkit-animation: first-44 2s 1 ease-out;
          animation: first-44 2s 1 ease-out;
}

@-webkit-keyframes mask-44 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-44 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-44 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-21.6deg);
  }
}

@keyframes first-44 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-21.6deg);
  }
}

[data-percentage="45"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="45"] .completed.active:before {
  transform: rotate(-18deg);
  -webkit-animation: first-45 2s 1 ease-out;
          animation: first-45 2s 1 ease-out;
}

@-webkit-keyframes mask-45 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-45 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-45 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-18deg);
  }
}

@keyframes first-45 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-18deg);
  }
}

[data-percentage="46"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="46"] .completed.active:before {
  transform: rotate(-14.4deg);
  -webkit-animation: first-46 2s 1 ease-out;
          animation: first-46 2s 1 ease-out;
}

@-webkit-keyframes mask-46 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-46 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-46 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-14.4deg);
  }
}

@keyframes first-46 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-14.4deg);
  }
}

[data-percentage="47"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="47"] .completed.active:before {
  transform: rotate(-10.8deg);
  -webkit-animation: first-47 2s 1 ease-out;
          animation: first-47 2s 1 ease-out;
}

@-webkit-keyframes mask-47 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-47 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-47 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-10.8deg);
  }
}

@keyframes first-47 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-10.8deg);
  }
}

[data-percentage="48"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="48"] .completed.active:before {
  transform: rotate(-7.2deg);
  -webkit-animation: first-48 2s 1 ease-out;
          animation: first-48 2s 1 ease-out;
}

@-webkit-keyframes mask-48 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-48 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-48 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-7.2deg);
  }
}

@keyframes first-48 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-7.2deg);
  }
}

[data-percentage="49"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="49"] .completed.active:before {
  transform: rotate(-3.6deg);
  -webkit-animation: first-49 2s 1 ease-out;
          animation: first-49 2s 1 ease-out;
}

@-webkit-keyframes mask-49 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-49 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-49 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-3.6deg);
  }
}

@keyframes first-49 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(-3.6deg);
  }
}

[data-percentage="50"] .completed {
  clip: rect(0 100px 100px 50px);
}

[data-percentage="50"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-50 2s 1 ease-out;
          animation: first-50 2s 1 ease-out;
}

@-webkit-keyframes mask-50 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-50 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-50 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-50 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

[data-percentage="51"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="51"] .completed.active {
  -webkit-animation: mask-51 2s linear;
          animation: mask-51 2s linear;
}

[data-percentage="51"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-51 2s 1 linear;
          animation: first-51 2s 1 linear;
}

[data-percentage="51"] .completed.active:after {
  transform: rotate(-176.4deg);
  -webkit-animation: second-51 2s 1 ease-out;
          animation: second-51 2s 1 ease-out;
}

@-webkit-keyframes mask-51 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-51 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-51 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-51 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-51 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-176.4deg);
  }
}

@keyframes second-51 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-176.4deg);
  }
}

[data-percentage="52"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="52"] .completed.active {
  -webkit-animation: mask-52 2s linear;
          animation: mask-52 2s linear;
}

[data-percentage="52"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-52 2s 1 linear;
          animation: first-52 2s 1 linear;
}

[data-percentage="52"] .completed.active:after {
  transform: rotate(-172.8deg);
  -webkit-animation: second-52 2s 1 ease-out;
          animation: second-52 2s 1 ease-out;
}

@-webkit-keyframes mask-52 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-52 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-52 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-52 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-52 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-172.8deg);
  }
}

@keyframes second-52 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-172.8deg);
  }
}

[data-percentage="53"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="53"] .completed.active {
  -webkit-animation: mask-53 2s linear;
          animation: mask-53 2s linear;
}

[data-percentage="53"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-53 2s 1 linear;
          animation: first-53 2s 1 linear;
}

[data-percentage="53"] .completed.active:after {
  transform: rotate(-169.2deg);
  -webkit-animation: second-53 2s 1 ease-out;
          animation: second-53 2s 1 ease-out;
}

@-webkit-keyframes mask-53 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-53 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-53 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-53 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-53 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-169.2deg);
  }
}

@keyframes second-53 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-169.2deg);
  }
}

[data-percentage="54"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="54"] .completed.active {
  -webkit-animation: mask-54 2s linear;
          animation: mask-54 2s linear;
}

[data-percentage="54"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-54 2s 1 linear;
          animation: first-54 2s 1 linear;
}

[data-percentage="54"] .completed.active:after {
  transform: rotate(-165.6deg);
  -webkit-animation: second-54 2s 1 ease-out;
          animation: second-54 2s 1 ease-out;
}

@-webkit-keyframes mask-54 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-54 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-54 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-54 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-54 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-165.6deg);
  }
}

@keyframes second-54 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-165.6deg);
  }
}

[data-percentage="55"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="55"] .completed.active {
  -webkit-animation: mask-55 2s linear;
          animation: mask-55 2s linear;
}

[data-percentage="55"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-55 2s 1 linear;
          animation: first-55 2s 1 linear;
}

[data-percentage="55"] .completed.active:after {
  transform: rotate(-162deg);
  -webkit-animation: second-55 2s 1 ease-out;
          animation: second-55 2s 1 ease-out;
}

@-webkit-keyframes mask-55 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-55 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-55 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-55 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-55 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-162deg);
  }
}

@keyframes second-55 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-162deg);
  }
}

[data-percentage="56"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="56"] .completed.active {
  -webkit-animation: mask-56 2s linear;
          animation: mask-56 2s linear;
}

[data-percentage="56"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-56 2s 1 linear;
          animation: first-56 2s 1 linear;
}

[data-percentage="56"] .completed.active:after {
  transform: rotate(-158.4deg);
  -webkit-animation: second-56 2s 1 ease-out;
          animation: second-56 2s 1 ease-out;
}

@-webkit-keyframes mask-56 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-56 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-56 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-56 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-56 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-158.4deg);
  }
}

@keyframes second-56 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-158.4deg);
  }
}

[data-percentage="57"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="57"] .completed.active {
  -webkit-animation: mask-57 2s linear;
          animation: mask-57 2s linear;
}

[data-percentage="57"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-57 2s 1 linear;
          animation: first-57 2s 1 linear;
}

[data-percentage="57"] .completed.active:after {
  transform: rotate(-154.8deg);
  -webkit-animation: second-57 2s 1 ease-out;
          animation: second-57 2s 1 ease-out;
}

@-webkit-keyframes mask-57 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-57 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-57 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-57 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-57 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-154.8deg);
  }
}

@keyframes second-57 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-154.8deg);
  }
}

[data-percentage="58"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="58"] .completed.active {
  -webkit-animation: mask-58 2s linear;
          animation: mask-58 2s linear;
}

[data-percentage="58"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-58 2s 1 linear;
          animation: first-58 2s 1 linear;
}

[data-percentage="58"] .completed.active:after {
  transform: rotate(-151.2deg);
  -webkit-animation: second-58 2s 1 ease-out;
          animation: second-58 2s 1 ease-out;
}

@-webkit-keyframes mask-58 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-58 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-58 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-58 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-58 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-151.2deg);
  }
}

@keyframes second-58 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-151.2deg);
  }
}

[data-percentage="59"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="59"] .completed.active {
  -webkit-animation: mask-59 2s linear;
          animation: mask-59 2s linear;
}

[data-percentage="59"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-59 2s 1 linear;
          animation: first-59 2s 1 linear;
}

[data-percentage="59"] .completed.active:after {
  transform: rotate(-147.6deg);
  -webkit-animation: second-59 2s 1 ease-out;
          animation: second-59 2s 1 ease-out;
}

@-webkit-keyframes mask-59 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-59 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-59 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-59 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-59 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-147.6deg);
  }
}

@keyframes second-59 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-147.6deg);
  }
}

[data-percentage="60"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="60"] .completed.active {
  -webkit-animation: mask-60 2s linear;
          animation: mask-60 2s linear;
}

[data-percentage="60"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-60 2s 1 linear;
          animation: first-60 2s 1 linear;
}

[data-percentage="60"] .completed.active:after {
  transform: rotate(-144deg);
  -webkit-animation: second-60 2s 1 ease-out;
          animation: second-60 2s 1 ease-out;
}

@-webkit-keyframes mask-60 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-60 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-60 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-60 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-60 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-144deg);
  }
}

@keyframes second-60 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-144deg);
  }
}

[data-percentage="61"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="61"] .completed.active {
  -webkit-animation: mask-61 2s linear;
          animation: mask-61 2s linear;
}

[data-percentage="61"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-61 2s 1 linear;
          animation: first-61 2s 1 linear;
}

[data-percentage="61"] .completed.active:after {
  transform: rotate(-140.4deg);
  -webkit-animation: second-61 2s 1 ease-out;
          animation: second-61 2s 1 ease-out;
}

@-webkit-keyframes mask-61 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-61 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-61 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-61 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-61 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-140.4deg);
  }
}

@keyframes second-61 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-140.4deg);
  }
}

[data-percentage="62"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="62"] .completed.active {
  -webkit-animation: mask-62 2s linear;
          animation: mask-62 2s linear;
}

[data-percentage="62"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-62 2s 1 linear;
          animation: first-62 2s 1 linear;
}

[data-percentage="62"] .completed.active:after {
  transform: rotate(-136.8deg);
  -webkit-animation: second-62 2s 1 ease-out;
          animation: second-62 2s 1 ease-out;
}

@-webkit-keyframes mask-62 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-62 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-62 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-62 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-62 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-136.8deg);
  }
}

@keyframes second-62 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-136.8deg);
  }
}

[data-percentage="63"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="63"] .completed.active {
  -webkit-animation: mask-63 2s linear;
          animation: mask-63 2s linear;
}

[data-percentage="63"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-63 2s 1 linear;
          animation: first-63 2s 1 linear;
}

[data-percentage="63"] .completed.active:after {
  transform: rotate(-133.2deg);
  -webkit-animation: second-63 2s 1 ease-out;
          animation: second-63 2s 1 ease-out;
}

@-webkit-keyframes mask-63 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-63 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-63 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-63 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-63 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-133.2deg);
  }
}

@keyframes second-63 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-133.2deg);
  }
}

[data-percentage="64"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="64"] .completed.active {
  -webkit-animation: mask-64 2s linear;
          animation: mask-64 2s linear;
}

[data-percentage="64"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-64 2s 1 linear;
          animation: first-64 2s 1 linear;
}

[data-percentage="64"] .completed.active:after {
  transform: rotate(-129.6deg);
  -webkit-animation: second-64 2s 1 ease-out;
          animation: second-64 2s 1 ease-out;
}

@-webkit-keyframes mask-64 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-64 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-64 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-64 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-64 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-129.6deg);
  }
}

@keyframes second-64 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-129.6deg);
  }
}

[data-percentage="65"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="65"] .completed.active {
  -webkit-animation: mask-65 2s linear;
          animation: mask-65 2s linear;
}

[data-percentage="65"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-65 2s 1 linear;
          animation: first-65 2s 1 linear;
}

[data-percentage="65"] .completed.active:after {
  transform: rotate(-126deg);
  -webkit-animation: second-65 2s 1 ease-out;
          animation: second-65 2s 1 ease-out;
}

@-webkit-keyframes mask-65 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-65 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-65 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-65 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-65 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-126deg);
  }
}

@keyframes second-65 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-126deg);
  }
}

[data-percentage="66"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="66"] .completed.active {
  -webkit-animation: mask-66 2s linear;
          animation: mask-66 2s linear;
}

[data-percentage="66"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-66 2s 1 linear;
          animation: first-66 2s 1 linear;
}

[data-percentage="66"] .completed.active:after {
  transform: rotate(-122.4deg);
  -webkit-animation: second-66 2s 1 ease-out;
          animation: second-66 2s 1 ease-out;
}

@-webkit-keyframes mask-66 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-66 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-66 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-66 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-66 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-122.4deg);
  }
}

@keyframes second-66 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-122.4deg);
  }
}

[data-percentage="67"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="67"] .completed.active {
  -webkit-animation: mask-67 2s linear;
          animation: mask-67 2s linear;
}

[data-percentage="67"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-67 2s 1 linear;
          animation: first-67 2s 1 linear;
}

[data-percentage="67"] .completed.active:after {
  transform: rotate(-118.8deg);
  -webkit-animation: second-67 2s 1 ease-out;
          animation: second-67 2s 1 ease-out;
}

@-webkit-keyframes mask-67 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-67 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-67 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-67 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-67 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-118.8deg);
  }
}

@keyframes second-67 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-118.8deg);
  }
}

[data-percentage="68"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="68"] .completed.active {
  -webkit-animation: mask-68 2s linear;
          animation: mask-68 2s linear;
}

[data-percentage="68"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-68 2s 1 linear;
          animation: first-68 2s 1 linear;
}

[data-percentage="68"] .completed.active:after {
  transform: rotate(-115.2deg);
  -webkit-animation: second-68 2s 1 ease-out;
          animation: second-68 2s 1 ease-out;
}

@-webkit-keyframes mask-68 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-68 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-68 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-68 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-68 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-115.2deg);
  }
}

@keyframes second-68 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-115.2deg);
  }
}

[data-percentage="69"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="69"] .completed.active {
  -webkit-animation: mask-69 2s linear;
          animation: mask-69 2s linear;
}

[data-percentage="69"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-69 2s 1 linear;
          animation: first-69 2s 1 linear;
}

[data-percentage="69"] .completed.active:after {
  transform: rotate(-111.6deg);
  -webkit-animation: second-69 2s 1 ease-out;
          animation: second-69 2s 1 ease-out;
}

@-webkit-keyframes mask-69 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-69 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-69 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-69 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-69 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-111.6deg);
  }
}

@keyframes second-69 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-111.6deg);
  }
}

[data-percentage="70"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="70"] .completed.active {
  -webkit-animation: mask-70 2s linear;
          animation: mask-70 2s linear;
}

[data-percentage="70"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-70 2s 1 linear;
          animation: first-70 2s 1 linear;
}

[data-percentage="70"] .completed.active:after {
  transform: rotate(-108deg);
  -webkit-animation: second-70 2s 1 ease-out;
          animation: second-70 2s 1 ease-out;
}

@-webkit-keyframes mask-70 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-70 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-70 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-70 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-70 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-108deg);
  }
}

@keyframes second-70 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-108deg);
  }
}

[data-percentage="71"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="71"] .completed.active {
  -webkit-animation: mask-71 2s linear;
          animation: mask-71 2s linear;
}

[data-percentage="71"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-71 2s 1 linear;
          animation: first-71 2s 1 linear;
}

[data-percentage="71"] .completed.active:after {
  transform: rotate(-104.4deg);
  -webkit-animation: second-71 2s 1 ease-out;
          animation: second-71 2s 1 ease-out;
}

@-webkit-keyframes mask-71 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-71 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-71 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-71 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-71 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-104.4deg);
  }
}

@keyframes second-71 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-104.4deg);
  }
}

[data-percentage="72"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="72"] .completed.active {
  -webkit-animation: mask-72 2s linear;
          animation: mask-72 2s linear;
}

[data-percentage="72"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-72 2s 1 linear;
          animation: first-72 2s 1 linear;
}

[data-percentage="72"] .completed.active:after {
  transform: rotate(-100.8deg);
  -webkit-animation: second-72 2s 1 ease-out;
          animation: second-72 2s 1 ease-out;
}

@-webkit-keyframes mask-72 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-72 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-72 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-72 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-72 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-100.8deg);
  }
}

@keyframes second-72 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-100.8deg);
  }
}

[data-percentage="73"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="73"] .completed.active {
  -webkit-animation: mask-73 2s linear;
          animation: mask-73 2s linear;
}

[data-percentage="73"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-73 2s 1 linear;
          animation: first-73 2s 1 linear;
}

[data-percentage="73"] .completed.active:after {
  transform: rotate(-97.2deg);
  -webkit-animation: second-73 2s 1 ease-out;
          animation: second-73 2s 1 ease-out;
}

@-webkit-keyframes mask-73 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-73 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-73 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-73 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-73 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-97.2deg);
  }
}

@keyframes second-73 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-97.2deg);
  }
}

[data-percentage="74"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="74"] .completed.active {
  -webkit-animation: mask-74 2s linear;
          animation: mask-74 2s linear;
}

[data-percentage="74"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-74 2s 1 linear;
          animation: first-74 2s 1 linear;
}

[data-percentage="74"] .completed.active:after {
  transform: rotate(-93.6deg);
  -webkit-animation: second-74 2s 1 ease-out;
          animation: second-74 2s 1 ease-out;
}

@-webkit-keyframes mask-74 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-74 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-74 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-74 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-74 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-93.6deg);
  }
}

@keyframes second-74 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-93.6deg);
  }
}

[data-percentage="75"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="75"] .completed.active {
  -webkit-animation: mask-75 2s linear;
          animation: mask-75 2s linear;
}

[data-percentage="75"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-75 2s 1 linear;
          animation: first-75 2s 1 linear;
}

[data-percentage="75"] .completed.active:after {
  transform: rotate(-90deg);
  -webkit-animation: second-75 2s 1 ease-out;
          animation: second-75 2s 1 ease-out;
}

@-webkit-keyframes mask-75 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-75 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-75 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-75 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-75 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

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

@keyframes second-75 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

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

[data-percentage="76"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="76"] .completed.active {
  -webkit-animation: mask-76 2s linear;
          animation: mask-76 2s linear;
}

[data-percentage="76"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-76 2s 1 linear;
          animation: first-76 2s 1 linear;
}

[data-percentage="76"] .completed.active:after {
  transform: rotate(-86.4deg);
  -webkit-animation: second-76 2s 1 ease-out;
          animation: second-76 2s 1 ease-out;
}

@-webkit-keyframes mask-76 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-76 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-76 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-76 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-76 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-86.4deg);
  }
}

@keyframes second-76 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-86.4deg);
  }
}

[data-percentage="77"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="77"] .completed.active {
  -webkit-animation: mask-77 2s linear;
          animation: mask-77 2s linear;
}

[data-percentage="77"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-77 2s 1 linear;
          animation: first-77 2s 1 linear;
}

[data-percentage="77"] .completed.active:after {
  transform: rotate(-82.8deg);
  -webkit-animation: second-77 2s 1 ease-out;
          animation: second-77 2s 1 ease-out;
}

@-webkit-keyframes mask-77 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-77 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-77 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-77 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-77 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-82.8deg);
  }
}

@keyframes second-77 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-82.8deg);
  }
}

[data-percentage="78"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="78"] .completed.active {
  -webkit-animation: mask-78 2s linear;
          animation: mask-78 2s linear;
}

[data-percentage="78"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-78 2s 1 linear;
          animation: first-78 2s 1 linear;
}

[data-percentage="78"] .completed.active:after {
  transform: rotate(-79.2deg);
  -webkit-animation: second-78 2s 1 ease-out;
          animation: second-78 2s 1 ease-out;
}

@-webkit-keyframes mask-78 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-78 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-78 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-78 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-78 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-79.2deg);
  }
}

@keyframes second-78 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-79.2deg);
  }
}

[data-percentage="79"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="79"] .completed.active {
  -webkit-animation: mask-79 2s linear;
          animation: mask-79 2s linear;
}

[data-percentage="79"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-79 2s 1 linear;
          animation: first-79 2s 1 linear;
}

[data-percentage="79"] .completed.active:after {
  transform: rotate(-75.6deg);
  -webkit-animation: second-79 2s 1 ease-out;
          animation: second-79 2s 1 ease-out;
}

@-webkit-keyframes mask-79 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-79 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-79 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-79 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-79 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-75.6deg);
  }
}

@keyframes second-79 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-75.6deg);
  }
}

[data-percentage="80"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="80"] .completed.active {
  -webkit-animation: mask-80 2s linear;
          animation: mask-80 2s linear;
}

[data-percentage="80"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-80 2s 1 linear;
          animation: first-80 2s 1 linear;
}

[data-percentage="80"] .completed.active:after {
  transform: rotate(-72deg);
  -webkit-animation: second-80 2s 1 ease-out;
          animation: second-80 2s 1 ease-out;
}

@-webkit-keyframes mask-80 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-80 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-80 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-80 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-80 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-72deg);
  }
}

@keyframes second-80 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-72deg);
  }
}

[data-percentage="81"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="81"] .completed.active {
  -webkit-animation: mask-81 2s linear;
          animation: mask-81 2s linear;
}

[data-percentage="81"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-81 2s 1 linear;
          animation: first-81 2s 1 linear;
}

[data-percentage="81"] .completed.active:after {
  transform: rotate(-68.4deg);
  -webkit-animation: second-81 2s 1 ease-out;
          animation: second-81 2s 1 ease-out;
}

@-webkit-keyframes mask-81 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-81 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-81 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-81 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-81 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-68.4deg);
  }
}

@keyframes second-81 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-68.4deg);
  }
}

[data-percentage="82"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="82"] .completed.active {
  -webkit-animation: mask-82 2s linear;
          animation: mask-82 2s linear;
}

[data-percentage="82"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-82 2s 1 linear;
          animation: first-82 2s 1 linear;
}

[data-percentage="82"] .completed.active:after {
  transform: rotate(-64.8deg);
  -webkit-animation: second-82 2s 1 ease-out;
          animation: second-82 2s 1 ease-out;
}

@-webkit-keyframes mask-82 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-82 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-82 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-82 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-82 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-64.8deg);
  }
}

@keyframes second-82 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-64.8deg);
  }
}

[data-percentage="83"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="83"] .completed.active {
  -webkit-animation: mask-83 2s linear;
          animation: mask-83 2s linear;
}

[data-percentage="83"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-83 2s 1 linear;
          animation: first-83 2s 1 linear;
}

[data-percentage="83"] .completed.active:after {
  transform: rotate(-61.2deg);
  -webkit-animation: second-83 2s 1 ease-out;
          animation: second-83 2s 1 ease-out;
}

@-webkit-keyframes mask-83 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-83 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-83 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-83 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-83 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-61.2deg);
  }
}

@keyframes second-83 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-61.2deg);
  }
}

[data-percentage="84"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="84"] .completed.active {
  -webkit-animation: mask-84 2s linear;
          animation: mask-84 2s linear;
}

[data-percentage="84"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-84 2s 1 linear;
          animation: first-84 2s 1 linear;
}

[data-percentage="84"] .completed.active:after {
  transform: rotate(-57.6deg);
  -webkit-animation: second-84 2s 1 ease-out;
          animation: second-84 2s 1 ease-out;
}

@-webkit-keyframes mask-84 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-84 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-84 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-84 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-84 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-57.6deg);
  }
}

@keyframes second-84 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-57.6deg);
  }
}

[data-percentage="85"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="85"] .completed.active {
  -webkit-animation: mask-85 2s linear;
          animation: mask-85 2s linear;
}

[data-percentage="85"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-85 2s 1 linear;
          animation: first-85 2s 1 linear;
}

[data-percentage="85"] .completed.active:after {
  transform: rotate(-54deg);
  -webkit-animation: second-85 2s 1 ease-out;
          animation: second-85 2s 1 ease-out;
}

@-webkit-keyframes mask-85 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-85 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-85 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-85 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-85 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-54deg);
  }
}

@keyframes second-85 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-54deg);
  }
}

[data-percentage="86"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="86"] .completed.active {
  -webkit-animation: mask-86 2s linear;
          animation: mask-86 2s linear;
}

[data-percentage="86"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-86 2s 1 linear;
          animation: first-86 2s 1 linear;
}

[data-percentage="86"] .completed.active:after {
  transform: rotate(-50.4deg);
  -webkit-animation: second-86 2s 1 ease-out;
          animation: second-86 2s 1 ease-out;
}

@-webkit-keyframes mask-86 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-86 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-86 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-86 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-86 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-50.4deg);
  }
}

@keyframes second-86 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-50.4deg);
  }
}

[data-percentage="87"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="87"] .completed.active {
  -webkit-animation: mask-87 2s linear;
          animation: mask-87 2s linear;
}

[data-percentage="87"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-87 2s 1 linear;
          animation: first-87 2s 1 linear;
}

[data-percentage="87"] .completed.active:after {
  transform: rotate(-46.8deg);
  -webkit-animation: second-87 2s 1 ease-out;
          animation: second-87 2s 1 ease-out;
}

@-webkit-keyframes mask-87 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-87 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-87 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-87 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-87 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-46.8deg);
  }
}

@keyframes second-87 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-46.8deg);
  }
}

[data-percentage="88"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="88"] .completed.active {
  -webkit-animation: mask-88 2s linear;
          animation: mask-88 2s linear;
}

[data-percentage="88"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-88 2s 1 linear;
          animation: first-88 2s 1 linear;
}

[data-percentage="88"] .completed.active:after {
  transform: rotate(-43.2deg);
  -webkit-animation: second-88 2s 1 ease-out;
          animation: second-88 2s 1 ease-out;
}

@-webkit-keyframes mask-88 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-88 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-88 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-88 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-88 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-43.2deg);
  }
}

@keyframes second-88 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-43.2deg);
  }
}

[data-percentage="89"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="89"] .completed.active {
  -webkit-animation: mask-89 2s linear;
          animation: mask-89 2s linear;
}

[data-percentage="89"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-89 2s 1 linear;
          animation: first-89 2s 1 linear;
}

[data-percentage="89"] .completed.active:after {
  transform: rotate(-39.6deg);
  -webkit-animation: second-89 2s 1 ease-out;
          animation: second-89 2s 1 ease-out;
}

@-webkit-keyframes mask-89 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-89 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-89 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-89 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-89 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-39.6deg);
  }
}

@keyframes second-89 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-39.6deg);
  }
}

[data-percentage="90"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="90"] .completed.active {
  -webkit-animation: mask-90 2s linear;
          animation: mask-90 2s linear;
}

[data-percentage="90"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-90 2s 1 linear;
          animation: first-90 2s 1 linear;
}

[data-percentage="90"] .completed.active:after {
  transform: rotate(-36deg);
  -webkit-animation: second-90 2s 1 ease-out;
          animation: second-90 2s 1 ease-out;
}

@-webkit-keyframes mask-90 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-90 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-90 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-90 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-90 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-36deg);
  }
}

@keyframes second-90 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-36deg);
  }
}

[data-percentage="91"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="91"] .completed.active {
  -webkit-animation: mask-91 2s linear;
          animation: mask-91 2s linear;
}

[data-percentage="91"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-91 2s 1 linear;
          animation: first-91 2s 1 linear;
}

[data-percentage="91"] .completed.active:after {
  transform: rotate(-32.4deg);
  -webkit-animation: second-91 2s 1 ease-out;
          animation: second-91 2s 1 ease-out;
}

@-webkit-keyframes mask-91 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-91 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-91 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-91 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-91 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-32.4deg);
  }
}

@keyframes second-91 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-32.4deg);
  }
}

[data-percentage="92"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="92"] .completed.active {
  -webkit-animation: mask-92 2s linear;
          animation: mask-92 2s linear;
}

[data-percentage="92"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-92 2s 1 linear;
          animation: first-92 2s 1 linear;
}

[data-percentage="92"] .completed.active:after {
  transform: rotate(-28.8deg);
  -webkit-animation: second-92 2s 1 ease-out;
          animation: second-92 2s 1 ease-out;
}

@-webkit-keyframes mask-92 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-92 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-92 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-92 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-92 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-28.8deg);
  }
}

@keyframes second-92 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-28.8deg);
  }
}

[data-percentage="93"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="93"] .completed.active {
  -webkit-animation: mask-93 2s linear;
          animation: mask-93 2s linear;
}

[data-percentage="93"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-93 2s 1 linear;
          animation: first-93 2s 1 linear;
}

[data-percentage="93"] .completed.active:after {
  transform: rotate(-25.2deg);
  -webkit-animation: second-93 2s 1 ease-out;
          animation: second-93 2s 1 ease-out;
}

@-webkit-keyframes mask-93 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-93 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-93 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-93 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-93 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-25.2deg);
  }
}

@keyframes second-93 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-25.2deg);
  }
}

[data-percentage="94"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="94"] .completed.active {
  -webkit-animation: mask-94 2s linear;
          animation: mask-94 2s linear;
}

[data-percentage="94"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-94 2s 1 linear;
          animation: first-94 2s 1 linear;
}

[data-percentage="94"] .completed.active:after {
  transform: rotate(-21.6deg);
  -webkit-animation: second-94 2s 1 ease-out;
          animation: second-94 2s 1 ease-out;
}

@-webkit-keyframes mask-94 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-94 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-94 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-94 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-94 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-21.6deg);
  }
}

@keyframes second-94 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-21.6deg);
  }
}

[data-percentage="95"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="95"] .completed.active {
  -webkit-animation: mask-95 2s linear;
          animation: mask-95 2s linear;
}

[data-percentage="95"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-95 2s 1 linear;
          animation: first-95 2s 1 linear;
}

[data-percentage="95"] .completed.active:after {
  transform: rotate(-18deg);
  -webkit-animation: second-95 2s 1 ease-out;
          animation: second-95 2s 1 ease-out;
}

@-webkit-keyframes mask-95 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-95 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-95 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-95 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-95 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-18deg);
  }
}

@keyframes second-95 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-18deg);
  }
}

[data-percentage="96"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="96"] .completed.active {
  -webkit-animation: mask-96 2s linear;
          animation: mask-96 2s linear;
}

[data-percentage="96"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-96 2s 1 linear;
          animation: first-96 2s 1 linear;
}

[data-percentage="96"] .completed.active:after {
  transform: rotate(-14.4deg);
  -webkit-animation: second-96 2s 1 ease-out;
          animation: second-96 2s 1 ease-out;
}

@-webkit-keyframes mask-96 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-96 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-96 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-96 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-96 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-14.4deg);
  }
}

@keyframes second-96 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-14.4deg);
  }
}

[data-percentage="97"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="97"] .completed.active {
  -webkit-animation: mask-97 2s linear;
          animation: mask-97 2s linear;
}

[data-percentage="97"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-97 2s 1 linear;
          animation: first-97 2s 1 linear;
}

[data-percentage="97"] .completed.active:after {
  transform: rotate(-10.8deg);
  -webkit-animation: second-97 2s 1 ease-out;
          animation: second-97 2s 1 ease-out;
}

@-webkit-keyframes mask-97 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-97 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-97 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-97 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-97 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-10.8deg);
  }
}

@keyframes second-97 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-10.8deg);
  }
}

[data-percentage="98"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="98"] .completed.active {
  -webkit-animation: mask-98 2s linear;
          animation: mask-98 2s linear;
}

[data-percentage="98"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-98 2s 1 linear;
          animation: first-98 2s 1 linear;
}

[data-percentage="98"] .completed.active:after {
  transform: rotate(-7.2deg);
  -webkit-animation: second-98 2s 1 ease-out;
          animation: second-98 2s 1 ease-out;
}

@-webkit-keyframes mask-98 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-98 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-98 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-98 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-98 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-7.2deg);
  }
}

@keyframes second-98 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-7.2deg);
  }
}

[data-percentage="99"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="99"] .completed.active {
  -webkit-animation: mask-99 2s linear;
          animation: mask-99 2s linear;
}

[data-percentage="99"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-99 2s 1 linear;
          animation: first-99 2s 1 linear;
}

[data-percentage="99"] .completed.active:after {
  transform: rotate(-3.6deg);
  -webkit-animation: second-99 2s 1 ease-out;
          animation: second-99 2s 1 ease-out;
}

@-webkit-keyframes mask-99 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-99 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-99 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-99 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-99 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-3.6deg);
  }
}

@keyframes second-99 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-3.6deg);
  }
}

[data-percentage="100"] .completed {
  clip: rect(0 100px 100px 0px);
}

[data-percentage="100"] .completed.active {
  -webkit-animation: mask-100 2s linear;
          animation: mask-100 2s linear;
}

[data-percentage="100"] .completed.active:before {
  transform: rotate(0deg);
  -webkit-animation: first-100 2s 1 linear;
          animation: first-100 2s 1 linear;
}

[data-percentage="100"] .completed.active:after {
  transform: rotate(0deg);
  -webkit-animation: second-100 2s 1 ease-out;
          animation: second-100 2s 1 ease-out;
}

@-webkit-keyframes mask-100 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@keyframes mask-100 {
  0%, 50% {
    clip: rect(0 100px 100px 50px);
  }

  50.01%, 100% {
    clip: rect(0 100px 100px 0px);
  }
}

@-webkit-keyframes first-100 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes first-100 {
  0% {
    transform: rotate(-180deg);
  }

  50%, 100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes second-100 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

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

@keyframes second-100 {
  0%, 50% {
    transform: rotate(0deg);
  }

  50.01% {
    transform: rotate(-180deg);
  }

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