CSS circle animations

HTML

<!-- 90 -->
<div class="superWrapper">
<div class="seventyNine wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>
<div class="whiteCircle"></div>
<div class="percent">90%</div>
<div class="title">EDUCATORS & VOLUNTEERS</div>
</div>
<!-- 100 -->
<div class="superWrapper">
<div class="seventyNine wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>
<div class="whiteCircle"></div>
<div class="percent">100%</div>
<div class="title">DAILY NEWS</div>
</div>
<!-- 80 -->
<div class="superWrapper">
<div class="fiftySeven wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>
<div class="whiteCircle"></div>
<div class="percent">57%</div>
<div class="title">TECHNOLOGY COMMUNITY</div>
</div>
<!-- 100 -->
<div class="superWrapper">
<div class="fiftySeven wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>
<div class="whiteCircle"></div>
<div class="percent">100%</div>
<div class="title">GROUPS & FORUM</div>
</div>

CSS

.superWrapper {
    position: relative;
    float: left;
}
.wrapper {
  width: 200px; /* Set the size of the progress bar */
  height: 200px;
  position: absolute; /* Enable clipping */
  clip: rect(0px, 200px, 200px, 100px); /* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.circle {
  width: 140px;
  height: 140px;
  border: 5px solid #323232;
  border-radius: 100%;
  position: absolute;
  clip: rect(0px, 100px, 200px, 0px);
}
.whiteCircle {
width: 140px;
height: 140px;
border: 5px solid #eaeaea;
border-radius: 100%;
background: none;
}
.percent {
position: absolute;
top: 35%;
left: 38%;
font-size: 38px;
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}
/* END GENERAL */

/* 79 */
div.seventyNine[data-anim~=base],
.seventyNine div[data-anim~=base] {
  -webkit-animation-iteration-count: 1;  /* Only run once */
  -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
  -webkit-animation-timing-function:linear; /* Linear animation */
}
.seventyNine.wrapper[data-anim~=wrapper] {
  -webkit-animation-duration: 0.01s; /* Complete keyframes asap */
  -webkit-animation-delay: .65s; /* Wait half of the animation */
  -webkit-animation-name: close-wrapper; /* Keyframes name */
}
.seventyNine .circle[data-anim~=left] {
  -webkit-animation-duration: 1s; /* Full animation time */
  -webkit-animation-name: seventyNine-left-spin;
}
.seventyNine .circle[data-anim~=right] {
  -webkit-animation-duration: .65s; /* Half animation time */
  -webkit-animation-name: seventyNine-right-spin;
}
/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes seventyNine-right-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}
/* Rotate the left side of the progress bar from 0 to 284.4 degrees */
@-webkit-keyframes seventyNine-left-spin...