How to implement a ring-loaded progress bar using the source CSS3

This time to bring you how to use the source CSS3 implementation of the ring loading progress bar, the use of source CSS3 to implement the ring loading progress bar considerations are what, the following is the actual case, take a look.

：

The requirement at the time was to have the progress bar load with a fan-shaped gradient effect. I thought for a while, as if only with border-img to do the gradient map, there is a super-stupid method is to write 50 rectangles distributed on the progress bar. The gradient provided by CSS3 has a linear gradient, a radial gradient, and a repeating gradient, and cannot figure out how to implement a sector gradient. Don't say, on the code:

<! DOCTYPE html>
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

JS Basic Usage Summary

How to avoid features and browser inference in JS