circle progress bar

Regarding: bootsnipp.com/snippets/nrDmZ

Works like a charm, for an easy use you can:

.progress .p-100 .progress-bar{

animation: loading-100 2s linear forwards;

}

.progress .p-90 .progress-bar{

animation: loading-90 1.8s linear forwards;

}

.progress .progress-left .progress-bar{

animation-delay: 2s;

}

@keyframes loading-90{

0%{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100%{

-webkit-transform: rotate(162deg);

transform: rotate(162deg);

}

}

@keyframes loading-100{

0%{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100%{

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

}

same with other values, hope it helps

trijulio () - 4 years ago - Reply 0