JQuery + CSS3 implements a ring progress bar and jquerycss3

JQuery + CSS3 implements a ring progress bar and jquerycss3
Implementation Principle

The principle is very simple. In this solution, we mainly use the CSS3transformInrotateAnd CSS3clipTwo attributes. Use them to achieve the semi-circle and rotation effect.

Implementation of Half Ring

First, let's look at its structure.

HTML

<div class="pie_right">    <div class="right"></div>    <div class="mask"><span>0</span>%</div></div>

The structure is very simple. This structure is clear at a glance.

CSS

. Pie_right {width: 200px; height: 200px; position: absolute; top: 0; left: 0; background: # 0cc ;}. right {width: 200px; height: 200px; background: #00 aacc; border-radius: 50%; position: absolute; top: 0; left: 0 ;}. pie_right ,. right {clip: rect (0, auto, auto, 100px );}. mask {width: 150px; height: 150px; border-radius: 50%; left: 25px; top: 25px; background: # FFF; position: absolute; text-align: center; line-height: 150px; font-size: 20px; background: # 0cc;/* The mask does not need to be cut. This is only for you to see the effect */clip: rect (0, auto, auto, 75px );}

It is quite simple to implement the semi-circle.border-radiusMake a rounded corner, and then useclipMake a cut effect ,(clipFor more information, see website introduction ),maskThis part is used to block external containers and produce a ring visually:

If it is rotated, it is easier to implement, that is, in the CSSright(I have not performed any browser-compatible code. Please add it on your own ):

.right {    transform: rotate(30deg);}

In this way, we can see the effect of a semi-arc rotation.

Integral ring implementation

Similarly, the left half ring is spliced. In order to make the html structure easier to understand and write JavaScript code, I made some modifications to the structure and optimized the results:

HTML

<div class="circle">    <div class="pie_left"><div class="left"></div></div>    <div class="pie_right"><div class="right"></div></div>    <div class="mask"><span>0</span>%</div></div>

CSS

.circle {    width: 200px;    height: 200px;      position: absolute;    border-radius: 50%;    background: #0cc;}.pie_left, .pie_right {    width: 200px;     height: 200px;    position: absolute;    top: 0;left: 0;}.left, .right {    display: block;    width:200px;     height:200px;    background:#00aacc;    border-radius: 50%;    position: absolute;    top: 0;    left: 0;    transform: rotate(30deg);}.pie_right, .right {    clip:rect(0,auto,auto,100px);}.pie_left, .left {    clip:rect(0,100px,auto,0);}.mask {    width: 150px;    height: 150px;    border-radius: 50%;    left: 25px;    top: 25px;    background: #FFF;    position: absolute;    text-align: center;    line-height: 150px;    font-size: 16px;}

The effect is as follows:

Ring final effect

Okay. Basically, our ring has been implemented. The following is the JS effect.

First, we need to consider that the rotation amplitude of the ring is determined by the percentage of digits in the ring. from 0% to 100%, the arc is divided into 3.6 ° each; the left side of the semi-arc is not moving until 180 °, that is, before the 50% progress. When it exceeds 50%, the left side of the semi-arc will be rotated.

After the principle is clear, the jQuery code is as follows (delete the rotation effect in CSS and rewrite it in JS ):

$(function() {    $('.circle').each(function(index, el) {        var num = $(this).find('span').text() * 3.6;        if (num<=180) {            $(this).find('.right').css('transform', "rotate(" + num + "deg)");        } else {            $(this).find('.right').css('transform', "rotate(180deg)");            $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");        };    });});

Then, we will see the final effect by changing the span value in the mask.

In this way, we only need to get the progress value of the current process from the background and pass it to span. Then we can see the progress of this ring on the page.