Use CSS3 to make an instance of a ring progress bar

This article shares an example of using CSS3 to make a doughnut progress bar

Recent PC-side projects to make one such page out, the others are very simple, the key is the percentage of the ring effect. I originally intended to use canvas directly, because it was easy for canvas to implement a circle.

The following is a canvas implementation of the ring code, there is a need to try, because today is mainly about the CSS3 method, canvas I will not explain more

<! DOCTYPE html> 
Later, because I did not use canvas to achieve is because the product and I said that this task will be very much, I ask will not more than 99? He said it's possible, you can set a limit of 999.

If 999 canvas rings are to be rendered ... Hundreds are too much of it, helpless under the choice of CSS3, at least this will be a lot faster. But CSS doesn't seem to be a way to draw a progress loop directly.

I'll post the full code later, and here's the approximate structure.

To implement the style of the progress bar with CSS, we can think of the method as if only with a different size of the circle to overlay, if it is to that kind of animation constantly rotating loading effect that is too simple, I will be very happy, unfortunately.


First, we're going to have a background circle, like this.


And then an inner circle to cover it.


It's a little bit like that, so we're going to focus on how to make it follow the percentages like dynamic display changes. JS is a must, I first speak the style

Next we're going to create two semicircle like this


CSS implementation of a semicircle method There are many, we can self-Baidu, I use Clip:rect (); This method to cut into half-circle, done these we just need to use JS to control the left and right sides of the semicircle rotate () rotation angle on the good.




Remember the end of the left and right two semi-circle color unified on it, I will post the source code, we introduce a JQ can be directly used




<! DOCTYPE html>