Animated Progress Bar pure CSS

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