.circular-progress {
  --size: 250px;
  --half-size: calc(var(--size) / 2);
  --stroke-width: 20px;
  --radius: calc((var(--size) - var(--stroke-width)) / 2);
  --circumference: calc(var(--radius) * pi * 2);
  --dash: calc((var(--progress) * var(--circumference)) / 100);
  font-size:2em;
  color: #333;
  text-transform: uppercase;
}
.circular-progress circle {
  cx: var(--half-size);
  cy: var(--half-size);
  r: var(--radius);
  stroke-width: var(--stroke-width);
  fill: none;
  stroke-linecap: round;
}
.circular-progress circle.bg {
  stroke: #949494;
}
.circular-progress circle.fg {
  transform: rotate(-90deg);
  transform-origin: var(--half-size) var(--half-size);
  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
  transition: stroke-dasharray 0.3s linear 0s;
  stroke: #333;
}
@property --progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.progress--0 {
  animation: progress-animation-0 2s ease 0s 1 forwards;
}
@keyframes progress-animation-0 {
  from {
    --progress: 0;
  }
  to {
    --progress: 0;
  }
}

.progress--1 {
  animation: progress-animation-1 2s ease 0s 1 forwards;
}
@keyframes progress-animation-1 {
  from {
    --progress: 0;
  }
  to {
    --progress: 1;
  }
}

.progress--2 {
  animation: progress-animation-2 2s ease 0s 1 forwards;
}
@keyframes progress-animation-2 {
  from {
    --progress: 0;
  }
  to {
    --progress: 2;
  }
}

.progress--3 {
  animation: progress-animation-3 2s ease 0s 1 forwards;
}
@keyframes progress-animation-3 {
  from {
    --progress: 0;
  }
  to {
    --progress: 3;
  }
}

.progress--4 {
  animation: progress-animation-4 2s ease 0s 1 forwards;
}
@keyframes progress-animation-4 {
  from {
    --progress: 0;
  }
  to {
    --progress: 4;
  }
}

.progress--5 {
  animation: progress-animation-5 2s ease 0s 1 forwards;
}
@keyframes progress-animation-5 {
  from {
    --progress: 0;
  }
  to {
    --progress: 5;
  }
}

.progress--6 {
  animation: progress-animation-6 2s ease 0s 1 forwards;
}
@keyframes progress-animation-6 {
  from {
    --progress: 0;
  }
  to {
    --progress: 6;
  }
}

.progress--7 {
  animation: progress-animation-7 2s ease 0s 1 forwards;
}
@keyframes progress-animation-7 {
  from {
    --progress: 0;
  }
  to {
    --progress: 7;
  }
}

.progress--8 {
  animation: progress-animation-8 2s ease 0s 1 forwards;
}
@keyframes progress-animation-8 {
  from {
    --progress: 0;
  }
  to {
    --progress: 8;
  }
}

.progress--9 {
  animation: progress-animation-9 2s ease 0s 1 forwards;
}
@keyframes progress-animation-9 {
  from {
    --progress: 0;
  }
  to {
    --progress: 9;
  }
}

.progress--10 {
  animation: progress-animation-10 2s ease 0s 1 forwards;
}
@keyframes progress-animation-10 {
  from {
    --progress: 0;
  }
  to {
    --progress: 10;
  }
}

.progress--11 {
  animation: progress-animation-11 2s ease 0s 1 forwards;
}
@keyframes progress-animation-11 {
  from {
    --progress: 0;
  }
  to {
    --progress: 11;
  }
}

.progress--12 {
  animation: progress-animation-12 2s ease 0s 1 forwards;
}
@keyframes progress-animation-12 {
  from {
    --progress: 0;
  }
  to {
    --progress: 12;
  }
}

.progress--13 {
  animation: progress-animation-13 2s ease 0s 1 forwards;
}
@keyframes progress-animation-13 {
  from {
    --progress: 0;
  }
  to {
    --progress: 13;
  }
}

.progress--14 {
  animation: progress-animation-14 2s ease 0s 1 forwards;
}
@keyframes progress-animation-14 {
  from {
    --progress: 0;
  }
  to {
    --progress: 14;
  }
}

.progress--15 {
  animation: progress-animation-15 2s ease 0s 1 forwards;
}
@keyframes progress-animation-15 {
  from {
    --progress: 0;
  }
  to {
    --progress: 15;
  }
}

.progress--16 {
  animation: progress-animation-16 2s ease 0s 1 forwards;
}
@keyframes progress-animation-16 {
  from {
    --progress: 0;
  }
  to {
    --progress: 16;
  }
}

.progress--17 {
  animation: progress-animation-17 2s ease 0s 1 forwards;
}
@keyframes progress-animation-17 {
  from {
    --progress: 0;
  }
  to {
    --progress: 17;
  }
}

.progress--18 {
  animation: progress-animation-18 2s ease 0s 1 forwards;
}
@keyframes progress-animation-18 {
  from {
    --progress: 0;
  }
  to {
    --progress: 18;
  }
}

.progress--19 {
  animation: progress-animation-19 2s ease 0s 1 forwards;
}
@keyframes progress-animation-19 {
  from {
    --progress: 0;
  }
  to {
    --progress: 19;
  }
}

.progress--20 {
  animation: progress-animation-20 2s ease 0s 1 forwards;
}
@keyframes progress-animation-20 {
  from {
    --progress: 0;
  }
  to {
    --progress: 20;
  }
}

.progress--21 {
  animation: progress-animation-21 2s ease 0s 1 forwards;
}
@keyframes progress-animation-21 {
  from {
    --progress: 0;
  }
  to {
    --progress: 21;
  }
}

.progress--22 {
  animation: progress-animation-22 2s ease 0s 1 forwards;
}
@keyframes progress-animation-22 {
  from {
    --progress: 0;
  }
  to {
    --progress: 22;
  }
}

.progress--23 {
  animation: progress-animation-23 2s ease 0s 1 forwards;
}
@keyframes progress-animation-23 {
  from {
    --progress: 0;
  }
  to {
    --progress: 23;
  }
}

.progress--24 {
  animation: progress-animation-24 2s ease 0s 1 forwards;
}
@keyframes progress-animation-24 {
  from {
    --progress: 0;
  }
  to {
    --progress: 24;
  }
}

.progress--25 {
  animation: progress-animation-25 2s ease 0s 1 forwards;
}
@keyframes progress-animation-25 {
  from {
    --progress: 0;
  }
  to {
    --progress: 25;
  }
}

.progress--26 {
  animation: progress-animation-26 2s ease 0s 1 forwards;
}
@keyframes progress-animation-26 {
  from {
    --progress: 0;
  }
  to {
    --progress: 26;
  }
}

.progress--27 {
  animation: progress-animation-27 2s ease 0s 1 forwards;
}
@keyframes progress-animation-27 {
  from {
    --progress: 0;
  }
  to {
    --progress: 27;
  }
}

.progress--28 {
  animation: progress-animation-28 2s ease 0s 1 forwards;
}
@keyframes progress-animation-28 {
  from {
    --progress: 0;
  }
  to {
    --progress: 28;
  }
}

.progress--29 {
  animation: progress-animation-29 2s ease 0s 1 forwards;
}
@keyframes progress-animation-29 {
  from {
    --progress: 0;
  }
  to {
    --progress: 29;
  }
}

.progress--30 {
  animation: progress-animation-30 2s ease 0s 1 forwards;
}
@keyframes progress-animation-30 {
  from {
    --progress: 0;
  }
  to {
    --progress: 30;
  }
}

.progress--31 {
  animation: progress-animation-31 2s ease 0s 1 forwards;
}
@keyframes progress-animation-31 {
  from {
    --progress: 0;
  }
  to {
    --progress: 31;
  }
}

.progress--32 {
  animation: progress-animation-32 2s ease 0s 1 forwards;
}
@keyframes progress-animation-32 {
  from {
    --progress: 0;
  }
  to {
    --progress: 32;
  }
}

.progress--33 {
  animation: progress-animation-33 2s ease 0s 1 forwards;
}
@keyframes progress-animation-33 {
  from {
    --progress: 0;
  }
  to {
    --progress: 33;
  }
}

.progress--34 {
  animation: progress-animation-34 2s ease 0s 1 forwards;
}
@keyframes progress-animation-34 {
  from {
    --progress: 0;
  }
  to {
    --progress: 34;
  }
}

.progress--35 {
  animation: progress-animation-35 2s ease 0s 1 forwards;
}
@keyframes progress-animation-35 {
  from {
    --progress: 0;
  }
  to {
    --progress: 35;
  }
}

.progress--36 {
  animation: progress-animation-36 2s ease 0s 1 forwards;
}
@keyframes progress-animation-36 {
  from {
    --progress: 0;
  }
  to {
    --progress: 36;
  }
}

.progress--37 {
  animation: progress-animation-37 2s ease 0s 1 forwards;
}
@keyframes progress-animation-37 {
  from {
    --progress: 0;
  }
  to {
    --progress: 37;
  }
}

.progress--38 {
  animation: progress-animation-38 2s ease 0s 1 forwards;
}
@keyframes progress-animation-38 {
  from {
    --progress: 0;
  }
  to {
    --progress: 38;
  }
}

.progress--39 {
  animation: progress-animation-39 2s ease 0s 1 forwards;
}
@keyframes progress-animation-39 {
  from {
    --progress: 0;
  }
  to {
    --progress: 39;
  }
}

.progress--40 {
  animation: progress-animation-40 2s ease 0s 1 forwards;
}
@keyframes progress-animation-40 {
  from {
    --progress: 0;
  }
  to {
    --progress: 40;
  }
}

.progress--41 {
  animation: progress-animation-41 2s ease 0s 1 forwards;
}
@keyframes progress-animation-41 {
  from {
    --progress: 0;
  }
  to {
    --progress: 41;
  }
}

.progress--42 {
  animation: progress-animation-42 2s ease 0s 1 forwards;
}
@keyframes progress-animation-42 {
  from {
    --progress: 0;
  }
  to {
    --progress: 42;
  }
}

.progress--43 {
  animation: progress-animation-43 2s ease 0s 1 forwards;
}
@keyframes progress-animation-43 {
  from {
    --progress: 0;
  }
  to {
    --progress: 43;
  }
}

.progress--44 {
  animation: progress-animation-44 2s ease 0s 1 forwards;
}
@keyframes progress-animation-44 {
  from {
    --progress: 0;
  }
  to {
    --progress: 44;
  }
}

.progress--45 {
  animation: progress-animation-45 2s ease 0s 1 forwards;
}
@keyframes progress-animation-45 {
  from {
    --progress: 0;
  }
  to {
    --progress: 45;
  }
}

.progress--46 {
  animation: progress-animation-46 2s ease 0s 1 forwards;
}
@keyframes progress-animation-46 {
  from {
    --progress: 0;
  }
  to {
    --progress: 46;
  }
}

.progress--47 {
  animation: progress-animation-47 2s ease 0s 1 forwards;
}
@keyframes progress-animation-47 {
  from {
    --progress: 0;
  }
  to {
    --progress: 47;
  }
}

.progress--48 {
  animation: progress-animation-48 2s ease 0s 1 forwards;
}
@keyframes progress-animation-48 {
  from {
    --progress: 0;
  }
  to {
    --progress: 48;
  }
}

.progress--49 {
  animation: progress-animation-49 2s ease 0s 1 forwards;
}
@keyframes progress-animation-49 {
  from {
    --progress: 0;
  }
  to {
    --progress: 49;
  }
}

.progress--50 {
  animation: progress-animation-50 2s ease 0s 1 forwards;
}
@keyframes progress-animation-50 {
  from {
    --progress: 0;
  }
  to {
    --progress: 50;
  }
}

.progress--51 {
  animation: progress-animation-51 2s ease 0s 1 forwards;
}
@keyframes progress-animation-51 {
  from {
    --progress: 0;
  }
  to {
    --progress: 51;
  }
}

.progress--52 {
  animation: progress-animation-52 2s ease 0s 1 forwards;
}
@keyframes progress-animation-52 {
  from {
    --progress: 0;
  }
  to {
    --progress: 52;
  }
}

.progress--53 {
  animation: progress-animation-53 2s ease 0s 1 forwards;
}
@keyframes progress-animation-53 {
  from {
    --progress: 0;
  }
  to {
    --progress: 53;
  }
}

.progress--54 {
  animation: progress-animation-54 2s ease 0s 1 forwards;
}
@keyframes progress-animation-54 {
  from {
    --progress: 0;
  }
  to {
    --progress: 54;
  }
}

.progress--55 {
  animation: progress-animation-55 2s ease 0s 1 forwards;
}
@keyframes progress-animation-55 {
  from {
    --progress: 0;
  }
  to {
    --progress: 55;
  }
}

.progress--56 {
  animation: progress-animation-56 2s ease 0s 1 forwards;
}
@keyframes progress-animation-56 {
  from {
    --progress: 0;
  }
  to {
    --progress: 56;
  }
}

.progress--57 {
  animation: progress-animation-57 2s ease 0s 1 forwards;
}
@keyframes progress-animation-57 {
  from {
    --progress: 0;
  }
  to {
    --progress: 57;
  }
}

.progress--58 {
  animation: progress-animation-58 2s ease 0s 1 forwards;
}
@keyframes progress-animation-58 {
  from {
    --progress: 0;
  }
  to {
    --progress: 58;
  }
}

.progress--59 {
  animation: progress-animation-59 2s ease 0s 1 forwards;
}
@keyframes progress-animation-59 {
  from {
    --progress: 0;
  }
  to {
    --progress: 59;
  }
}

.progress--60 {
  animation: progress-animation-60 2s ease 0s 1 forwards;
}
@keyframes progress-animation-60 {
  from {
    --progress: 0;
  }
  to {
    --progress: 60;
  }
}

.progress--61 {
  animation: progress-animation-61 2s ease 0s 1 forwards;
}
@keyframes progress-animation-61 {
  from {
    --progress: 0;
  }
  to {
    --progress: 61;
  }
}

.progress--62 {
  animation: progress-animation-62 2s ease 0s 1 forwards;
}
@keyframes progress-animation-62 {
  from {
    --progress: 0;
  }
  to {
    --progress: 62;
  }
}

.progress--63 {
  animation: progress-animation-63 2s ease 0s 1 forwards;
}
@keyframes progress-animation-63 {
  from {
    --progress: 0;
  }
  to {
    --progress: 63;
  }
}

.progress--64 {
  animation: progress-animation-64 2s ease 0s 1 forwards;
}
@keyframes progress-animation-64 {
  from {
    --progress: 0;
  }
  to {
    --progress: 64;
  }
}

.progress--65 {
  animation: progress-animation-65 2s ease 0s 1 forwards;
}
@keyframes progress-animation-65 {
  from {
    --progress: 0;
  }
  to {
    --progress: 65;
  }
}

.progress--66 {
  animation: progress-animation-66 2s ease 0s 1 forwards;
}
@keyframes progress-animation-66 {
  from {
    --progress: 0;
  }
  to {
    --progress: 66;
  }
}

.progress--67 {
  animation: progress-animation-67 2s ease 0s 1 forwards;
}
@keyframes progress-animation-67 {
  from {
    --progress: 0;
  }
  to {
    --progress: 67;
  }
}

.progress--68 {
  animation: progress-animation-68 2s ease 0s 1 forwards;
}
@keyframes progress-animation-68 {
  from {
    --progress: 0;
  }
  to {
    --progress: 68;
  }
}

.progress--69 {
  animation: progress-animation-69 2s ease 0s 1 forwards;
}
@keyframes progress-animation-69 {
  from {
    --progress: 0;
  }
  to {
    --progress: 69;
  }
}

.progress--70 {
  animation: progress-animation-70 2s ease 0s 1 forwards;
}
@keyframes progress-animation-70 {
  from {
    --progress: 0;
  }
  to {
    --progress: 70;
  }
}

.progress--71 {
  animation: progress-animation-71 2s ease 0s 1 forwards;
}
@keyframes progress-animation-71 {
  from {
    --progress: 0;
  }
  to {
    --progress: 71;
  }
}

.progress--72 {
  animation: progress-animation-72 2s ease 0s 1 forwards;
}
@keyframes progress-animation-72 {
  from {
    --progress: 0;
  }
  to {
    --progress: 72;
  }
}

.progress--73 {
  animation: progress-animation-73 2s ease 0s 1 forwards;
}
@keyframes progress-animation-73 {
  from {
    --progress: 0;
  }
  to {
    --progress: 73;
  }
}

.progress--74 {
  animation: progress-animation-74 2s ease 0s 1 forwards;
}
@keyframes progress-animation-74 {
  from {
    --progress: 0;
  }
  to {
    --progress: 74;
  }
}

.progress--75 {
  animation: progress-animation-75 2s ease 0s 1 forwards;
}
@keyframes progress-animation-75 {
  from {
    --progress: 0;
  }
  to {
    --progress: 75;
  }
}

.progress--76 {
  animation: progress-animation-76 2s ease 0s 1 forwards;
}
@keyframes progress-animation-76 {
  from {
    --progress: 0;
  }
  to {
    --progress: 76;
  }
}

.progress--77 {
  animation: progress-animation-77 2s ease 0s 1 forwards;
}
@keyframes progress-animation-77 {
  from {
    --progress: 0;
  }
  to {
    --progress: 77;
  }
}

.progress--78 {
  animation: progress-animation-78 2s ease 0s 1 forwards;
}
@keyframes progress-animation-78 {
  from {
    --progress: 0;
  }
  to {
    --progress: 78;
  }
}

.progress--79 {
  animation: progress-animation-79 2s ease 0s 1 forwards;
}
@keyframes progress-animation-79 {
  from {
    --progress: 0;
  }
  to {
    --progress: 79;
  }
}

.progress--80 {
  animation: progress-animation-80 2s ease 0s 1 forwards;
}
@keyframes progress-animation-80 {
  from {
    --progress: 0;
  }
  to {
    --progress: 80;
  }
}

.progress--81 {
  animation: progress-animation-81 2s ease 0s 1 forwards;
}
@keyframes progress-animation-81 {
  from {
    --progress: 0;
  }
  to {
    --progress: 81;
  }
}

.progress--82 {
  animation: progress-animation-82 2s ease 0s 1 forwards;
}
@keyframes progress-animation-82 {
  from {
    --progress: 0;
  }
  to {
    --progress: 82;
  }
}

.progress--83 {
  animation: progress-animation-83 2s ease 0s 1 forwards;
}
@keyframes progress-animation-83 {
  from {
    --progress: 0;
  }
  to {
    --progress: 83;
  }
}

.progress--84 {
  animation: progress-animation-84 2s ease 0s 1 forwards;
}
@keyframes progress-animation-84 {
  from {
    --progress: 0;
  }
  to {
    --progress: 84;
  }
}

.progress--85 {
  animation: progress-animation-85 2s ease 0s 1 forwards;
}
@keyframes progress-animation-85 {
  from {
    --progress: 0;
  }
  to {
    --progress: 85;
  }
}

.progress--86 {
  animation: progress-animation-86 2s ease 0s 1 forwards;
}
@keyframes progress-animation-86 {
  from {
    --progress: 0;
  }
  to {
    --progress: 86;
  }
}

.progress--87 {
  animation: progress-animation-87 2s ease 0s 1 forwards;
}
@keyframes progress-animation-87 {
  from {
    --progress: 0;
  }
  to {
    --progress: 87;
  }
}

.progress--88 {
  animation: progress-animation-88 2s ease 0s 1 forwards;
}
@keyframes progress-animation-88 {
  from {
    --progress: 0;
  }
  to {
    --progress: 88;
  }
}

.progress--89 {
  animation: progress-animation-89 2s ease 0s 1 forwards;
}
@keyframes progress-animation-89 {
  from {
    --progress: 0;
  }
  to {
    --progress: 89;
  }
}

.progress--90 {
  animation: progress-animation-90 2s ease 0s 1 forwards;
}
@keyframes progress-animation-90 {
  from {
    --progress: 0;
  }
  to {
    --progress: 90;
  }
}

.progress--91 {
  animation: progress-animation-91 2s ease 0s 1 forwards;
}
@keyframes progress-animation-91 {
  from {
    --progress: 0;
  }
  to {
    --progress: 91;
  }
}

.progress--92 {
  animation: progress-animation-92 2s ease 0s 1 forwards;
}
@keyframes progress-animation-92 {
  from {
    --progress: 0;
  }
  to {
    --progress: 92;
  }
}

.progress--93 {
  animation: progress-animation-93 2s ease 0s 1 forwards;
}
@keyframes progress-animation-93 {
  from {
    --progress: 0;
  }
  to {
    --progress: 93;
  }
}

.progress--94 {
  animation: progress-animation-94 2s ease 0s 1 forwards;
}
@keyframes progress-animation-94 {
  from {
    --progress: 0;
  }
  to {
    --progress: 94;
  }
}

.progress--95 {
  animation: progress-animation-95 2s ease 0s 1 forwards;
}
@keyframes progress-animation-95 {
  from {
    --progress: 0;
  }
  to {
    --progress: 95;
  }
}

.progress--96 {
  animation: progress-animation-96 2s ease 0s 1 forwards;
}
@keyframes progress-animation-96 {
  from {
    --progress: 0;
  }
  to {
    --progress: 96;
  }
}

.progress--97 {
  animation: progress-animation-97 2s ease 0s 1 forwards;
}
@keyframes progress-animation-97 {
  from {
    --progress: 0;
  }
  to {
    --progress: 97;
  }
}

.progress--98 {
  animation: progress-animation-98 2s ease 0s 1 forwards;
}
@keyframes progress-animation-98 {
  from {
    --progress: 0;
  }
  to {
    --progress: 98;
  }
}

.progress--99 {
  animation: progress-animation-99 2s ease 0s 1 forwards;
}
@keyframes progress-animation-99 {
  from {
    --progress: 0;
  }
  to {
    --progress: 99;
  }
}

.progress--100 {
  animation: progress-animation-100 2s ease 0s 1 forwards;
}
@keyframes progress-animation-100 {
  from {
    --progress: 0;
  }
  to {
    --progress: 100;
  }
}