Here i have explained how create Animated Progress Bar using pure CSS.
Step 1) Add HTML:
<div class="loading-wrap">
<span class="animator">
<span class="outerCircle"></span>
<span class="innerCircle"></span>
</span>
</div>
Step 2) CSS
.animator {
display: block;
margin: 30px auto 0 auto;
width: 60px;
height: 60px;
}
.animator .innerCircle {
display: block;
position: absolute;
margin: 15px 0 0 15px;
width: 30px;
height: 30px;
border-top: 1px solid #271100;
border-bottom: 1px solid #271100;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-radius: 30px;
box-shadow: 0 0 15px #271100;
-webkit-animation: ccwSpin .555s linear .2s infinite;
animation: ccwSpin .555s linear .2s infinite;
}
.animator .outerCircle {
display: block;
position: absolute;
margin: 0 auto;
width: 60px;
height: 60px;
border-top: 1px solid #271100;
border-bottom: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid #271100;
border-radius: 60px;
-webkit-animation: cwSpin .666s linear .2s infinite;
animation: cwSpin .666s linear .2s infinite;
}
.animator .innerCircle {
border-top: 1px solid transparent;
border-bottom: 1px solid #271100;
border-left: 1px solid #271100;
border-right: 1px solid transparent;
box-shadow: none;
}
@-webkit-keyframes cwSpin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes cwSpin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes ccwSpin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes ccwSpin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
Screenshot