.progress {
  width: 45px;
  height: 45px;
  line-height: 45px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}
.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #eee;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-bar {
  width: 99%;
  height: 100%;
  background: none;
  border-width: 4px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #FED394;
}
.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress .progress-value {
  display: flex;
  border-radius: 50%;
  font-size: 11px;
  text-align: center;
  line-height: 14px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
}
.progress .progress-value div {
  margin-top: 0;
}
.progress .progress-value span {
  font-size: 12px;
  text-transform: uppercase;
}

/* This for loop creates the 	necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
/* 
/* .progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="15"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}
.progress[data-percentage="15"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="25"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}
.progress[data-percentage="25"] .progress-left .progress-bar {
  animation: 0;
}


.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="35"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}
.progress[data-percentage="35"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}


.progress[data-percentage="45"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}
.progress[data-percentage="45"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="55"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="55"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}


.progress[data-percentage="65"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="65"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="75"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="75"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}


.progress[data-percentage="85"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="85"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}


.progress[data-percentage="95"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="95"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}  */


/* loding */

.progress[data-percentage="1"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}
.progress[data-percentage="1"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="2"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}
.progress[data-percentage="2"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="3"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}
.progress[data-percentage="3"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="4"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}
.progress[data-percentage="4"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="5"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="5"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="6"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="6"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="7"] .progress-right .progress-bar {
  animation: loading-7 1.5s linear forwards;
}
.progress[data-percentage="7"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="8"] .progress-right .progress-bar {
  animation: loading-8 1.5s linear forwards;
}
.progress[data-percentage="8"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="9"] .progress-right .progress-bar {
  animation: loading-9 1.5s linear forwards;
}
.progress[data-percentage="9"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-10 1.5s linear forwards;
}
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="11"] .progress-right .progress-bar {
  animation: loading-11 1.5s linear forwards;
}
.progress[data-percentage="11"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="12"] .progress-right .progress-bar {
  animation: loading-12 1.5s linear forwards;
}
.progress[data-percentage="12"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="13"] .progress-right .progress-bar {
  animation: loading-13 1.5s linear forwards;
}
.progress[data-percentage="13"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="14"] .progress-right .progress-bar {
  animation: loading-14 1.5s linear forwards;
}
.progress[data-percentage="14"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="15"] .progress-right .progress-bar {
  animation: loading-15 1.5s linear forwards;
}
.progress[data-percentage="15"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="16"] .progress-right .progress-bar {
  animation: loading-16 1.5s linear forwards;
}
.progress[data-percentage="16"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="17"] .progress-right .progress-bar {
  animation: loading-17 1.5s linear forwards;
}
.progress[data-percentage="17"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="18"] .progress-right .progress-bar {
  animation: loading-18 1.5s linear forwards;
}
.progress[data-percentage="18"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="19"] .progress-right .progress-bar {
  animation: loading-19 1.5s linear forwards;
}
.progress[data-percentage="19"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-20 1.5s linear forwards;
}
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="21"] .progress-right .progress-bar {
  animation: loading-21 1.5s linear forwards;
}
.progress[data-percentage="21"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="22"] .progress-right .progress-bar {
  animation: loading-22 1.5s linear forwards;
}
.progress[data-percentage="22"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="23"] .progress-right .progress-bar {
  animation: loading-23 1.5s linear forwards;
}
.progress[data-percentage="23"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="24"] .progress-right .progress-bar {
  animation: loading-24 1.5s linear forwards;
}
.progress[data-percentage="24"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="25"] .progress-right .progress-bar {
  animation: loading-25 1.5s linear forwards;
}
.progress[data-percentage="25"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="26"] .progress-right .progress-bar {
  animation: loading-26 1.5s linear forwards;
}
.progress[data-percentage="26"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="27"] .progress-right .progress-bar {
  animation: loading-27 1.5s linear forwards;
}
.progress[data-percentage="27"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="28"] .progress-right .progress-bar {
  animation: loading-28 1.5s linear forwards;
}
.progress[data-percentage="28"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="29"] .progress-right .progress-bar {
  animation: loading-29 1.5s linear forwards;
}
.progress[data-percentage="29"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-30 1.5s linear forwards;
}
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="31"] .progress-right .progress-bar {
  animation: loading-31 1.5s linear forwards;
}
.progress[data-percentage="31"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="32"] .progress-right .progress-bar {
  animation: loading-32 1.5s linear forwards;
}
.progress[data-percentage="32"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="33"] .progress-right .progress-bar {
  animation: loading-33 1.5s linear forwards;
}
.progress[data-percentage="3"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="34"] .progress-right .progress-bar {
  animation: loading-34 1.5s linear forwards;
}
.progress[data-percentage="34"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="35"] .progress-right .progress-bar {
  animation: loading-35 1.5s linear forwards;
}
.progress[data-percentage="35"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="36"] .progress-right .progress-bar {
  animation: loading-36 1.5s linear forwards;
}
.progress[data-percentage="36"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="37"] .progress-right .progress-bar {
  animation: loading-37 1.5s linear forwards;
}
.progress[data-percentage="37"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="38"] .progress-right .progress-bar {
  animation: loading-38 1.5s linear forwards;
}
.progress[data-percentage="38"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="39"] .progress-right .progress-bar {
  animation: loading-39 1.5s linear forwards;
}
.progress[data-percentage="39"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-40 1.5s linear forwards;
}
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="41"] .progress-right .progress-bar {
  animation: loading-41 1.5s linear forwards;
}
.progress[data-percentage="41"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="42"] .progress-right .progress-bar {
  animation: loading-42 1.5s linear forwards;
}
.progress[data-percentage="42"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="43"] .progress-right .progress-bar {
  animation: loading-43 1.5s linear forwards;
}
.progress[data-percentage="43"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="44"] .progress-right .progress-bar {
  animation: loading-44 1.5s linear forwards;
}
.progress[data-percentage="44"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="45"] .progress-right .progress-bar {
  animation: loading-45 1.5s linear forwards;
}
.progress[data-percentage="45"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="46"] .progress-right .progress-bar {
  animation: loading-46 1.5s linear forwards;
}
.progress[data-percentage="46"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="47"] .progress-right .progress-bar {
  animation: loading-47 1.5s linear forwards;
}
.progress[data-percentage="47"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="48"] .progress-right .progress-bar {
  animation: loading-48 1.5s linear forwards;
}
.progress[data-percentage="48"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="49"] .progress-right .progress-bar {
  animation: loading-49 1.5s linear forwards;
}
.progress[data-percentage="49"] .progress-left .progress-bar {
  animation: 0;
}
.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="51"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="51"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}
.progress[data-percentage="52"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="52"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}
.progress[data-percentage="53"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="53"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}
.progress[data-percentage="54"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="54"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}
.progress[data-percentage="55"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="55"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}
.progress[data-percentage="56"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="56"] .progress-left .progress-bar {
  animation: loading-6 1.5s linear forwards 1.5s;
}
.progress[data-percentage="57"] .progress-right .progress-bar {
    animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="57"] .progress-left .progress-bar {
  animation: loading-7 1.5s linear forwards 1.5s;
}
.progress[data-percentage="58"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="58"] .progress-left .progress-bar {
  animation: loading-8 1.5s linear forwards 1.5s;
}
.progress[data-percentage="59"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="59"] .progress-left .progress-bar {
  animation: loading-9 1.5s linear forwards 1.5s;
}
.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-10 1.5s linear forwards 1.5s;
}
.progress[data-percentage="61"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="61"] .progress-left .progress-bar {
  animation: loading-50 1.5s linear forwards 1.5s;
}
.progress[data-percentage="62"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="62"] .progress-left .progress-bar {
  animation: loading-50 1.5s linear forwards 1.5s;
}
.progress[data-percentage="63"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="63"] .progress-left .progress-bar {
  animation: loading-13 1.5s linear forwards 1.5s;
}
.progress[data-percentage="64"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="64"] .progress-left .progress-bar {
  animation: loading-14 1.5s linear forwards 1.5s;
}
.progress[data-percentage="65"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="65"] .progress-left .progress-bar {
  animation: loading-15 1.5s linear forwards 1.5s;
}
.progress[data-percentage="66"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="66"] .progress-left .progress-bar {
  animation: loading-16 1.5s linear forwards 1.5s;
}
.progress[data-percentage="67"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="67"] .progress-left .progress-bar {
  animation: loading-17 1.5s linear forwards 1.5s;
}
.progress[data-percentage="68"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="68"] .progress-left .progress-bar {
  animation: loading-18 1.5s linear forwards 1.5s;
}
.progress[data-percentage="69"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="69"] .progress-left .progress-bar {
  animation: loading-19 1.5s linear forwards 1.5s;
}
.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-20 1.5s linear forwards 1.5s;
}
.progress[data-percentage="71"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="71"] .progress-left .progress-bar {
  animation: loading-21 1.5s linear forwards 1.5s;
}
.progress[data-percentage="72"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="72"] .progress-left .progress-bar {
  animation: loading-22 1.5s linear forwards 1.5s;
}
.progress[data-percentage="73"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="73"] .progress-left .progress-bar {
  animation: loading-23 1.5s linear forwards 1.5s;
}
.progress[data-percentage="74"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="74"] .progress-left .progress-bar {
  animation: loading-24 1.5s linear forwards 1.5s;
}
.progress[data-percentage="75"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="75"] .progress-left .progress-bar {
  animation: loading-25 1.5s linear forwards 1.5s;
}
.progress[data-percentage="76"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="76"] .progress-left .progress-bar {
  animation: loading-26 1.5s linear forwards 1.5s;
}
.progress[data-percentage="77"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="77"] .progress-left .progress-bar {
  animation: loading-27 1.5s linear forwards 1.5s;
}
.progress[data-percentage="78"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="78"] .progress-left .progress-bar {
  animation: loading-28 1.5s linear forwards 1.5s;
}
.progress[data-percentage="79"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="79"] .progress-left .progress-bar {
  animation: loading-29 1.5s linear forwards 1.5s;
}
.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-30 1.5s linear forwards 1.5s;
}
.progress[data-percentage="81"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="81"] .progress-left .progress-bar {
  animation: loading-31 1.5s linear forwards 1.5s;
}
.progress[data-percentage="82"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="82"] .progress-left .progress-bar {
  animation: loading-32 1.5s linear forwards 1.5s;
}
.progress[data-percentage="83"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="83"] .progress-left .progress-bar {
  animation: loading-33 1.5s linear forwards 1.5s;
}
.progress[data-percentage="84"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="84"] .progress-left .progress-bar {
  animation: loading-34 1.5s linear forwards 1.5s;
}
.progress[data-percentage="85"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="85"] .progress-left .progress-bar {
  animation: loading-35 1.5s linear forwards 1.5s;
}
.progress[data-percentage="86"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="86"] .progress-left .progress-bar {
  animation: loading-36 1.5s linear forwards 1.5s;
}
.progress[data-percentage="87"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="87"] .progress-left .progress-bar {
  animation: loading-37 1.5s linear forwards 1.5s;
}
.progress[data-percentage="88"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="88"] .progress-left .progress-bar {
  animation: loading-38 1.5s linear forwards 1.5s;
}
.progress[data-percentage="89"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="89"] .progress-left .progress-bar {
  animation: loading-39 1.5s linear forwards 1.5s;
}
.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-40 1.5s linear forwards 1.5s;
}
.progress[data-percentage="91"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="91"] .progress-left .progress-bar {
  animation: loading-41 1.5s linear forwards 1.5s;
}
.progress[data-percentage="92"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="92"] .progress-left .progress-bar {
  animation: loading-42 1.5s linear forwards 1.5s;
}
.progress[data-percentage="93"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="93"] .progress-left .progress-bar {
  animation: loading-43 1.5s linear forwards 1.5s;
}
.progress[data-percentage="94"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="94"] .progress-left .progress-bar {
  animation: loading-44 1.5s linear forwards 1.5s;
}
.progress[data-percentage="95"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="95"] .progress-left .progress-bar {
  animation: loading-45 1.5s linear forwards 1.5s;
}
.progress[data-percentage="96"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="96"] .progress-left .progress-bar {
  animation: loading-46 1.5s linear forwards 1.5s;
}
.progress[data-percentage="97"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="97"] .progress-left .progress-bar {
  animation: loading-46 1.5s linear forwards 1.5s;
}
.progress[data-percentage="98"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="98"] .progress-left .progress-bar {
  animation: loading-48 1.5s linear forwards 1.5s;
}
.progress[data-percentage="99"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="99"] .progress-left .progress-bar {
  animation: loading-49 1.5s linear forwards 1.5s;
}
.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-50 1.5s linear forwards;
}
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-50 1.5s linear forwards 1.5s;
}

/* loding keyframes */
@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(3);
    transform: rotate(3deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(6);
    transform: rotate(6deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(9);
    transform: rotate(9deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(12);
    transform: rotate(12deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(15);
    transform: rotate(15deg);
  }
}
@keyframes loading-6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(18);
    transform: rotate(18deg);
  }
}
@keyframes loading-7 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(20);
    transform: rotate(20deg);
  }
}
@keyframes loading-8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(26);
    transform: rotate(26deg);
  }
}
@keyframes loading-9 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(30);
    transform: rotate(30deg);
  }
}
@keyframes loading-10 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}
@keyframes loading-11 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(40);
    transform: rotate(40deg);
  }
}
@keyframes loading-12 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(42);
    transform: rotate(42deg);
  }
}
@keyframes loading-13 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(45);
    transform: rotate(45deg);
  }
}
@keyframes loading-14 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(48);
    transform: rotate(48deg);
  }
}
@keyframes loading-15 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(52);
    transform: rotate(52deg);
  }
}
@keyframes loading-16 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(55);
    transform: rotate(55deg);
  }
}
@keyframes loading-17 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(60);
    transform: rotate(60deg);
  }
}
@keyframes loading-18 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(65);
    transform: rotate(65deg);
  }
}
@keyframes loading-19 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(70);
    transform: rotate(70deg);
  }
}
@keyframes loading-20 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}

@keyframes loading-21 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(75);
    transform: rotate(75deg);
  }
}
@keyframes loading-22 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(80);
    transform: rotate(80deg);
  }
}
@keyframes loading-23 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(85);
    transform: rotate(85deg);
  }
}
@keyframes loading-24 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(87);
    transform: rotate(87deg);
  }
}
@keyframes loading-25 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(90);
    transform: rotate(90deg);
  }
}
@keyframes loading-26 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(95);
    transform: rotate(95deg);
  }
}
@keyframes loading-27 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(100);
    transform: rotate(100deg);
  }
}
@keyframes loading-28 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(105);
    transform: rotate(105deg);
  }
}
@keyframes loading-29 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(107);
    transform: rotate(107deg);
  }
}
@keyframes loading-30 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}

@keyframes loading-31 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(112);
    transform: rotate(112deg);
  }
}
@keyframes loading-32 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(118);
    transform: rotate(118deg);
  }
}
@keyframes loading-33 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(121);
    transform: rotate(121deg);
  }
}
@keyframes loading-34 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(125);
    transform: rotate(125deg);
  }
}
@keyframes loading-35 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(130);
    transform: rotate(130deg);
  }
}
@keyframes loading-36 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(133);
    transform: rotate(133deg);
  }
}
@keyframes loading-37 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(138);
    transform: rotate(138deg);
  }
}
@keyframes loading-38 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(140);
    transform: rotate(140deg);
  }
}
@keyframes loading-39 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(142);
    transform: rotate(142deg);
  }
}
@keyframes loading-40 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}

@keyframes loading-41 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(148);
    transform: rotate(148deg);
  }
}
@keyframes loading-42 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(152);
    transform: rotate(152deg);
  }
}
@keyframes loading-43 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(155);
    transform: rotate(155deg);
  }
}
@keyframes loading-44 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(160);
    transform: rotate(160deg);
  }
}
@keyframes loading-45 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(165);
    transform: rotate(165deg);
  }
}
@keyframes loading-46 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(170);
    transform: rotate(170deg);
  }
}
@keyframes loading-47 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(175);
    transform: rotate(175deg);
  }
}
@keyframes loading-48 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(177);
    transform: rotate(177deg);
  }
}
@keyframes loading-49 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(178);
    transform: rotate(178deg);
  }
}
@keyframes loading-50 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}