CSS3 clip Implementation of the Ring progress bar

This article mainly and you introduced the CSS3 clip implementation of the ring progress bar example code of the relevant information, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

There is a property in CSS called clip, which is intended for trimming and clipping.

The Clip property trims an absolutely positioned element. This property is used to define a clipping rectangle. For an absolutely defined element, the content within the rectangle is visible. The contents of this clipping area are processed according to the value of overflow.

Circular progress bar. gif

How to achieve the effect of such a ring progress bar, you can use canvas, SVG, GIF and so on, today we use CSS3 how to achieve.

Implementation ideas

The ring is very simple, a line cssborder-radius:50% can be implemented, and there is no compatibility problem, what, you say IE, let it roll ...

We need three rings here, one whole, two and a half. Probably painted.

Here half the ring I used clip for clipping, the main code is as follows,

. left{    width:200px;    height:200px;    border-radius:50%;    border:10px solid lightblue;    Position:absolute;    Top: -10px;   /* 10 Because the border is 10 pixels */Right    : -10px;    Clip:rect (0 100px 200px 0);  /* above for 0 right to 100px below 200px left to 0 of this area we cut out */}

Right, just like the clipping position.

. right{    width:200px;    height:200px;    border-radius:50%;    border:10px solid lightblue;    Position:absolute;    Top: -10px;  /* 10 Because the border is 10 pixels */Right    : -10px;    Clip:rect (0 200px 200px 100px);  /* location change, calculation can refer to */}

Full code

<! DOCTYPE html>