.progress {
  background: #333;
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  padding: 0 5px;
  display: flex;
  height: 22px;
  min-width: 200px;
}

.progress-value {
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: #fff;
  height: 15px;
  width: 0;
  display:flex;
  align-items: center;
  padding-left: 1em;
  font-size: .8em;
  text-transform: uppercase;
}

.progress-bar--1 {
  animation: progress-bar-animation-1 2s ease forwards;
}
@keyframes progress-bar-animation-1 {
  0% { width: 0; }
  100% { width: 1%; }
}

.progress-bar--2 {
  animation: progress-bar-animation-2 2s ease forwards;
}
@keyframes progress-bar-animation-2 {
  0% { width: 0; }
  100% { width: 2%; }
}

.progress-bar--3 {
  animation: progress-bar-animation-3 2s ease forwards;
}
@keyframes progress-bar-animation-3 {
  0% { width: 0; }
  100% { width: 3%; }
}

.progress-bar--4 {
  animation: progress-bar-animation-4 2s ease forwards;
}
@keyframes progress-bar-animation-4 {
  0% { width: 0; }
  100% { width: 4%; }
}

.progress-bar--5 {
  animation: progress-bar-animation-5 2s ease forwards;
}
@keyframes progress-bar-animation-5 {
  0% { width: 0; }
  100% { width: 5%; }
}

.progress-bar--6 {
  animation: progress-bar-animation-6 2s ease forwards;
}
@keyframes progress-bar-animation-6 {
  0% { width: 0; }
  100% { width: 6%; }
}

.progress-bar--7 {
  animation: progress-bar-animation-7 2s ease forwards;
}
@keyframes progress-bar-animation-7 {
  0% { width: 0; }
  100% { width: 7%; }
}

.progress-bar--8 {
  animation: progress-bar-animation-8 2s ease forwards;
}
@keyframes progress-bar-animation-8 {
  0% { width: 0; }
  100% { width: 8%; }
}

.progress-bar--9 {
  animation: progress-bar-animation-9 2s ease forwards;
}
@keyframes progress-bar-animation-9 {
  0% { width: 0; }
  100% { width: 9%; }
}

.progress-bar--10 {
  animation: progress-bar-animation-10 2s ease forwards;
}
@keyframes progress-bar-animation-10 {
  0% { width: 0; }
  100% { width: 10%; }
}

.progress-bar--11 {
  animation: progress-bar-animation-11 2s ease forwards;
}
@keyframes progress-bar-animation-11 {
  0% { width: 0; }
  100% { width: 11%; }
}

.progress-bar--12 {
  animation: progress-bar-animation-12 2s ease forwards;
}
@keyframes progress-bar-animation-12 {
  0% { width: 0; }
  100% { width: 12%; }
}

.progress-bar--13 {
  animation: progress-bar-animation-13 2s ease forwards;
}
@keyframes progress-bar-animation-13 {
  0% { width: 0; }
  100% { width: 13%; }
}

.progress-bar--14 {
  animation: progress-bar-animation-14 2s ease forwards;
}
@keyframes progress-bar-animation-14 {
  0% { width: 0; }
  100% { width: 14%; }
}

.progress-bar--15 {
  animation: progress-bar-animation-15 2s ease forwards;
}
@keyframes progress-bar-animation-15 {
  0% { width: 0; }
  100% { width: 15%; }
}

.progress-bar--16 {
  animation: progress-bar-animation-16 2s ease forwards;
}
@keyframes progress-bar-animation-16 {
  0% { width: 0; }
  100% { width: 16%; }
}

.progress-bar--17 {
  animation: progress-bar-animation-17 2s ease forwards;
}
@keyframes progress-bar-animation-17 {
  0% { width: 0; }
  100% { width: 17%; }
}

.progress-bar--18 {
  animation: progress-bar-animation-18 2s ease forwards;
}
@keyframes progress-bar-animation-18 {
  0% { width: 0; }
  100% { width: 18%; }
}

.progress-bar--19 {
  animation: progress-bar-animation-19 2s ease forwards;
}
@keyframes progress-bar-animation-19 {
  0% { width: 0; }
  100% { width: 19%; }
}

.progress-bar--20 {
  animation: progress-bar-animation-20 2s ease forwards;
}
@keyframes progress-bar-animation-20 {
  0% { width: 0; }
  100% { width: 20%; }
}

.progress-bar--21 {
  animation: progress-bar-animation-21 2s ease forwards;
}
@keyframes progress-bar-animation-21 {
  0% { width: 0; }
  100% { width: 21%; }
}

.progress-bar--22 {
  animation: progress-bar-animation-22 2s ease forwards;
}
@keyframes progress-bar-animation-22 {
  0% { width: 0; }
  100% { width: 22%; }
}

.progress-bar--23 {
  animation: progress-bar-animation-23 2s ease forwards;
}
@keyframes progress-bar-animation-23 {
  0% { width: 0; }
  100% { width: 23%; }
}

.progress-bar--24 {
  animation: progress-bar-animation-24 2s ease forwards;
}
@keyframes progress-bar-animation-24 {
  0% { width: 0; }
  100% { width: 24%; }
}

.progress-bar--25 {
  animation: progress-bar-animation-25 2s ease forwards;
}
@keyframes progress-bar-animation-25 {
  0% { width: 0; }
  100% { width: 25%; }
}

.progress-bar--26 {
  animation: progress-bar-animation-26 2s ease forwards;
}
@keyframes progress-bar-animation-26 {
  0% { width: 0; }
  100% { width: 26%; }
}

.progress-bar--27 {
  animation: progress-bar-animation-27 2s ease forwards;
}
@keyframes progress-bar-animation-27 {
  0% { width: 0; }
  100% { width: 27%; }
}

.progress-bar--28 {
  animation: progress-bar-animation-28 2s ease forwards;
}
@keyframes progress-bar-animation-28 {
  0% { width: 0; }
  100% { width: 28%; }
}

.progress-bar--29 {
  animation: progress-bar-animation-29 2s ease forwards;
}
@keyframes progress-bar-animation-29 {
  0% { width: 0; }
  100% { width: 29%; }
}

.progress-bar--30 {
  animation: progress-bar-animation-30 2s ease forwards;
}
@keyframes progress-bar-animation-30 {
  0% { width: 0; }
  100% { width: 30%; }
}

.progress-bar--31 {
  animation: progress-bar-animation-31 2s ease forwards;
}
@keyframes progress-bar-animation-31 {
  0% { width: 0; }
  100% { width: 31%; }
}

.progress-bar--32 {
  animation: progress-bar-animation-32 2s ease forwards;
}
@keyframes progress-bar-animation-32 {
  0% { width: 0; }
  100% { width: 32%; }
}

.progress-bar--33 {
  animation: progress-bar-animation-33 2s ease forwards;
}
@keyframes progress-bar-animation-33 {
  0% { width: 0; }
  100% { width: 33%; }
}

.progress-bar--34 {
  animation: progress-bar-animation-34 2s ease forwards;
}
@keyframes progress-bar-animation-34 {
  0% { width: 0; }
  100% { width: 34%; }
}

.progress-bar--35 {
  animation: progress-bar-animation-35 2s ease forwards;
}
@keyframes progress-bar-animation-35 {
  0% { width: 0; }
  100% { width: 35%; }
}

.progress-bar--36 {
  animation: progress-bar-animation-36 2s ease forwards;
}
@keyframes progress-bar-animation-36 {
  0% { width: 0; }
  100% { width: 36%; }
}

.progress-bar--37 {
  animation: progress-bar-animation-37 2s ease forwards;
}
@keyframes progress-bar-animation-37 {
  0% { width: 0; }
  100% { width: 37%; }
}

.progress-bar--38 {
  animation: progress-bar-animation-38 2s ease forwards;
}
@keyframes progress-bar-animation-38 {
  0% { width: 0; }
  100% { width: 38%; }
}

.progress-bar--39 {
  animation: progress-bar-animation-39 2s ease forwards;
}
@keyframes progress-bar-animation-39 {
  0% { width: 0; }
  100% { width: 39%; }
}

.progress-bar--40 {
  animation: progress-bar-animation-40 2s ease forwards;
}
@keyframes progress-bar-animation-40 {
  0% { width: 0; }
  100% { width: 40%; }
}

.progress-bar--41 {
  animation: progress-bar-animation-41 2s ease forwards;
}
@keyframes progress-bar-animation-41 {
  0% { width: 0; }
  100% { width: 41%; }
}

.progress-bar--42 {
  animation: progress-bar-animation-42 2s ease forwards;
}
@keyframes progress-bar-animation-42 {
  0% { width: 0; }
  100% { width: 42%; }
}

.progress-bar--43 {
  animation: progress-bar-animation-43 2s ease forwards;
}
@keyframes progress-bar-animation-43 {
  0% { width: 0; }
  100% { width: 43%; }
}

.progress-bar--44 {
  animation: progress-bar-animation-44 2s ease forwards;
}
@keyframes progress-bar-animation-44 {
  0% { width: 0; }
  100% { width: 44%; }
}

.progress-bar--45 {
  animation: progress-bar-animation-45 2s ease forwards;
}
@keyframes progress-bar-animation-45 {
  0% { width: 0; }
  100% { width: 45%; }
}

.progress-bar--46 {
  animation: progress-bar-animation-46 2s ease forwards;
}
@keyframes progress-bar-animation-46 {
  0% { width: 0; }
  100% { width: 46%; }
}

.progress-bar--47 {
  animation: progress-bar-animation-47 2s ease forwards;
}
@keyframes progress-bar-animation-47 {
  0% { width: 0; }
  100% { width: 47%; }
}

.progress-bar--48 {
  animation: progress-bar-animation-48 2s ease forwards;
}
@keyframes progress-bar-animation-48 {
  0% { width: 0; }
  100% { width: 48%; }
}

.progress-bar--49 {
  animation: progress-bar-animation-49 2s ease forwards;
}
@keyframes progress-bar-animation-49 {
  0% { width: 0; }
  100% { width: 49%; }
}

.progress-bar--50 {
  animation: progress-bar-animation-50 2s ease forwards;
}
@keyframes progress-bar-animation-50 {
  0% { width: 0; }
  100% { width: 50%; }
}

.progress-bar--51 {
  animation: progress-bar-animation-51 2s ease forwards;
}
@keyframes progress-bar-animation-51 {
  0% { width: 0; }
  100% { width: 51%; }
}

.progress-bar--52 {
  animation: progress-bar-animation-52 2s ease forwards;
}
@keyframes progress-bar-animation-52 {
  0% { width: 0; }
  100% { width: 52%; }
}

.progress-bar--53 {
  animation: progress-bar-animation-53 2s ease forwards;
}
@keyframes progress-bar-animation-53 {
  0% { width: 0; }
  100% { width: 53%; }
}

.progress-bar--54 {
  animation: progress-bar-animation-54 2s ease forwards;
}
@keyframes progress-bar-animation-54 {
  0% { width: 0; }
  100% { width: 54%; }
}

.progress-bar--55 {
  animation: progress-bar-animation-55 2s ease forwards;
}
@keyframes progress-bar-animation-55 {
  0% { width: 0; }
  100% { width: 55%; }
}

.progress-bar--56 {
  animation: progress-bar-animation-56 2s ease forwards;
}
@keyframes progress-bar-animation-56 {
  0% { width: 0; }
  100% { width: 56%; }
}

.progress-bar--57 {
  animation: progress-bar-animation-57 2s ease forwards;
}
@keyframes progress-bar-animation-57 {
  0% { width: 0; }
  100% { width: 57%; }
}

.progress-bar--58 {
  animation: progress-bar-animation-58 2s ease forwards;
}
@keyframes progress-bar-animation-58 {
  0% { width: 0; }
  100% { width: 58%; }
}

.progress-bar--59 {
  animation: progress-bar-animation-59 2s ease forwards;
}
@keyframes progress-bar-animation-59 {
  0% { width: 0; }
  100% { width: 59%; }
}

.progress-bar--60 {
  animation: progress-bar-animation-60 2s ease forwards;
}
@keyframes progress-bar-animation-60 {
  0% { width: 0; }
  100% { width: 60%; }
}

.progress-bar--61 {
  animation: progress-bar-animation-61 2s ease forwards;
}
@keyframes progress-bar-animation-61 {
  0% { width: 0; }
  100% { width: 61%; }
}

.progress-bar--62 {
  animation: progress-bar-animation-62 2s ease forwards;
}
@keyframes progress-bar-animation-62 {
  0% { width: 0; }
  100% { width: 62%; }
}

.progress-bar--63 {
  animation: progress-bar-animation-63 2s ease forwards;
}
@keyframes progress-bar-animation-63 {
  0% { width: 0; }
  100% { width: 63%; }
}

.progress-bar--64 {
  animation: progress-bar-animation-64 2s ease forwards;
}
@keyframes progress-bar-animation-64 {
  0% { width: 0; }
  100% { width: 64%; }
}

.progress-bar--65 {
  animation: progress-bar-animation-65 2s ease forwards;
}
@keyframes progress-bar-animation-65 {
  0% { width: 0; }
  100% { width: 65%; }
}

.progress-bar--66 {
  animation: progress-bar-animation-66 2s ease forwards;
}
@keyframes progress-bar-animation-66 {
  0% { width: 0; }
  100% { width: 66%; }
}

.progress-bar--67 {
  animation: progress-bar-animation-67 2s ease forwards;
}
@keyframes progress-bar-animation-67 {
  0% { width: 0; }
  100% { width: 67%; }
}

.progress-bar--68 {
  animation: progress-bar-animation-68 2s ease forwards;
}
@keyframes progress-bar-animation-68 {
  0% { width: 0; }
  100% { width: 68%; }
}

.progress-bar--69 {
  animation: progress-bar-animation-69 2s ease forwards;
}
@keyframes progress-bar-animation-69 {
  0% { width: 0; }
  100% { width: 69%; }
}

.progress-bar--70 {
  animation: progress-bar-animation-70 2s ease forwards;
}
@keyframes progress-bar-animation-70 {
  0% { width: 0; }
  100% { width: 70%; }
}

.progress-bar--71 {
  animation: progress-bar-animation-71 2s ease forwards;
}
@keyframes progress-bar-animation-71 {
  0% { width: 0; }
  100% { width: 71%; }
}

.progress-bar--72 {
  animation: progress-bar-animation-72 2s ease forwards;
}
@keyframes progress-bar-animation-72 {
  0% { width: 0; }
  100% { width: 72%; }
}

.progress-bar--73 {
  animation: progress-bar-animation-73 2s ease forwards;
}
@keyframes progress-bar-animation-73 {
  0% { width: 0; }
  100% { width: 73%; }
}

.progress-bar--74 {
  animation: progress-bar-animation-74 2s ease forwards;
}
@keyframes progress-bar-animation-74 {
  0% { width: 0; }
  100% { width: 74%; }
}

.progress-bar--75 {
  animation: progress-bar-animation-75 2s ease forwards;
}
@keyframes progress-bar-animation-75 {
  0% { width: 0; }
  100% { width: 75%; }
}

.progress-bar--76 {
  animation: progress-bar-animation-76 2s ease forwards;
}
@keyframes progress-bar-animation-76 {
  0% { width: 0; }
  100% { width: 76%; }
}

.progress-bar--77 {
  animation: progress-bar-animation-77 2s ease forwards;
}
@keyframes progress-bar-animation-77 {
  0% { width: 0; }
  100% { width: 77%; }
}

.progress-bar--78 {
  animation: progress-bar-animation-78 2s ease forwards;
}
@keyframes progress-bar-animation-78 {
  0% { width: 0; }
  100% { width: 78%; }
}

.progress-bar--79 {
  animation: progress-bar-animation-79 2s ease forwards;
}
@keyframes progress-bar-animation-79 {
  0% { width: 0; }
  100% { width: 79%; }
}

.progress-bar--80 {
  animation: progress-bar-animation-80 2s ease forwards;
}
@keyframes progress-bar-animation-80 {
  0% { width: 0; }
  100% { width: 80%; }
}

.progress-bar--81 {
  animation: progress-bar-animation-81 2s ease forwards;
}
@keyframes progress-bar-animation-81 {
  0% { width: 0; }
  100% { width: 81%; }
}

.progress-bar--82 {
  animation: progress-bar-animation-82 2s ease forwards;
}
@keyframes progress-bar-animation-82 {
  0% { width: 0; }
  100% { width: 82%; }
}

.progress-bar--83 {
  animation: progress-bar-animation-83 2s ease forwards;
}
@keyframes progress-bar-animation-83 {
  0% { width: 0; }
  100% { width: 83%; }
}

.progress-bar--84 {
  animation: progress-bar-animation-84 2s ease forwards;
}
@keyframes progress-bar-animation-84 {
  0% { width: 0; }
  100% { width: 84%; }
}

.progress-bar--85 {
  animation: progress-bar-animation-85 2s ease forwards;
}
@keyframes progress-bar-animation-85 {
  0% { width: 0; }
  100% { width: 85%; }
}

.progress-bar--86 {
  animation: progress-bar-animation-86 2s ease forwards;
}
@keyframes progress-bar-animation-86 {
  0% { width: 0; }
  100% { width: 86%; }
}

.progress-bar--87 {
  animation: progress-bar-animation-87 2s ease forwards;
}
@keyframes progress-bar-animation-87 {
  0% { width: 0; }
  100% { width: 87%; }
}

.progress-bar--88 {
  animation: progress-bar-animation-88 2s ease forwards;
}
@keyframes progress-bar-animation-88 {
  0% { width: 0; }
  100% { width: 88%; }
}

.progress-bar--89 {
  animation: progress-bar-animation-89 2s ease forwards;
}
@keyframes progress-bar-animation-89 {
  0% { width: 0; }
  100% { width: 89%; }
}

.progress-bar--90 {
  animation: progress-bar-animation-90 2s ease forwards;
}
@keyframes progress-bar-animation-90 {
  0% { width: 0; }
  100% { width: 90%; }
}

.progress-bar--91 {
  animation: progress-bar-animation-91 2s ease forwards;
}
@keyframes progress-bar-animation-91 {
  0% { width: 0; }
  100% { width: 91%; }
}

.progress-bar--92 {
  animation: progress-bar-animation-92 2s ease forwards;
}
@keyframes progress-bar-animation-92 {
  0% { width: 0; }
  100% { width: 92%; }
}

.progress-bar--93 {
  animation: progress-bar-animation-93 2s ease forwards;
}
@keyframes progress-bar-animation-93 {
  0% { width: 0; }
  100% { width: 93%; }
}

.progress-bar--94 {
  animation: progress-bar-animation-94 2s ease forwards;
}
@keyframes progress-bar-animation-94 {
  0% { width: 0; }
  100% { width: 94%; }
}

.progress-bar--95 {
  animation: progress-bar-animation-95 2s ease forwards;
}
@keyframes progress-bar-animation-95 {
  0% { width: 0; }
  100% { width: 95%; }
}

.progress-bar--96 {
  animation: progress-bar-animation-96 2s ease forwards;
}
@keyframes progress-bar-animation-96 {
  0% { width: 0; }
  100% { width: 96%; }
}

.progress-bar--97 {
  animation: progress-bar-animation-97 2s ease forwards;
}
@keyframes progress-bar-animation-97 {
  0% { width: 0; }
  100% { width: 97%; }
}

.progress-bar--98 {
  animation: progress-bar-animation-98 2s ease forwards;
}
@keyframes progress-bar-animation-98 {
  0% { width: 0; }
  100% { width: 98%; }
}

.progress-bar--99 {
  animation: progress-bar-animation-99 2s ease forwards;
}
@keyframes progress-bar-animation-99 {
  0% { width: 0; }
  100% { width: 99%; }
}

.progress-bar--100 {
  animation: progress-bar-animation-100 2s ease forwards;
}
@keyframes progress-bar-animation-100 {
  0% { width: 0; }
  100% { width: 100%; }
}