Pure CSS3 Realization Arc (circle) percent animation progress bar

Original link: http://caibaojian.com/css3-radial-progress-bar.html
Clip transform keyframes animation-duration animation-delay animation-name animation-iteration-count Animation-fill-mode animation-timing-function

The code is as follows:

<div class= "wrapper" data-anim= "base wrapper" >
  <div class= "Circle" data-anim= "base left" ></div >
  <div class= "Circle" data-anim= "base right" ></div>
</div>

First define the basic style:

. wrapper {
  width:100px;/* Set the size of the progress bar */
  height:100px;
  Position:absolute; /* Enable clipping *
  /clip:rect (0px, 100px, 100px, 50px);/* Hide half of the progress bar */
}/
* Set the SI Zes of the elements that make up the progress bar */
. Circle {
  width:80px;
  height:80px;
  border:10px solid Green;
  border-radius:50px;
  Position:absolute;
  Clip:rect (0px, 50px, 100px, 0px);
}

Then there is the animation rule ·

/* Using The data attributes for the animation selectors. *
/* Base settings for all animated elements *
/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 */
}

. wrapper[data-anim~=wrapper] {
  -webkit-animation-duration:0.01s;/* Complete keyframes ASAP */
  -webkit-animation-delay:3s;/* Wait half of the animation */
  -WEBKIT-ANIMATION-NAME:CLOSE-WR Apper; /* Keyframes name */
}

. circle[data-anim~=left] {
  -webkit-animation-duration:6s;/* Full animation time */
  -webkit-animation-name:left-spin;
}

. Circle[data-anim~=right] {
  -webkit-animation-duration:3s;/* Half animation time */
  -webkit-animation-name : Right-spin;
}

And finally the animated frame.

code from http://caibaojian.com/css3-radial-progress-bar.html/* Rotate the right side of the
progress bar from 0 to Degrees *
/@-webkit-keyframes Right-spin {from
  {
    -webkit-transform:rotate (0deg);
  }
  to {
    -webkit-transform:rotate (180deg);
  }
}
/* Rotate The left side of the progress bar from 0 to degrees */
@-webkit-keyframes Left-spin {from
  {
    -webkit-transform:rotate (0deg);
  }
  to {
    -webkit-transform:rotate (360deg);
  }
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes Close-wrapper {to
  {
    C Lip:rect (auto, auto, auto, Auto);
  }
}

Operating principle:

First: is to define three animations, the first one is the outermost layer, let him only show half, then run 3s, while running 3s on the right, from 0-180 degrees.

Then: After 180 degrees, release the outer half of the display so that he automatically displays the other. Then stop the animation on the right and stop there.

Finally: The left side on the original base (as on the right side of the 3s, also turned 180 degrees) and then continue to turn 180 degrees.

Source: Front-end Development blog