Implement Circle progress bar with CSS3

This time to bring you to use CSS3 to achieve the circle progress bar, with CSS3 to achieve the circle progress bar Note what, the following is the actual case, together to see.

In the development of small programs, the need to meet the circular progress bar. Using canvas drawing is tricky:

1, in order to realize the adaptation on different screens, it is necessary to dynamically calculate the size of the progress bar;

2. In small programs, canvas has the highest level of canvases and is not easy to expand.

However, it is easy to avoid this problem by using CSS3 and JS to implement the progress bar.

Note: This article uses jquery to implement, but the principle is the same, in the small program as long as the definition and change the corresponding variable on the line

First, the style of the progress bar style

In peacetime development, the border of the element is often used to display the circular pattern, which is also used when using CSS3 to implement a circular progress bar. In order to achieve the above circular border, the dynamic coverage of the circular border below, a total of a circle, 2 rectangles and 2 semicircular: a circle to show the underlying background, two semicircular to cover the underlying background display progress, the other two rectangles to cover the progress does not need to display. Such as:

The bottom bottom circle is the background of the progress bar, with left and right two rectangles on the bottom to cover the not-displayed progress bar. There is a semicircle in the two rectangles to show the progress. Under normal circumstances, the square is drawn with a half-circle, the diameter and the level of the 45-degree angle. In order for the two semicircle to cover the entire circle, it is necessary to use the rotate in the CSS3 to rotate the original square to reach the entire background. such as (in order to show clearly, here is represented by a square):

, the half-circle inside the rectangle is rotated 45 degrees to the right (clockwise), and the image of the entire background can be obtained. Rotate the semicircle 135 degrees to the left (counterclockwise) to get an image with only the background of the progress bar. Why rotate to the left instead of always turning to the right, of course, because the effect is: the progress is from the top, the smooth time to go. Here, the idea is very clear, only need to press the percentage of how much to control the left and right of the progress of the display can be.

Implement this part of the HTML and CSS code as follows:

HTML code

<p class= "ProgressBar" >    <p class= "Left-container" >        <p class= "Left-circle" ></p>    </p>    <p class= "Right-container" >        <p class= "right-circle" ></p>    </p ></p>

CSS code:

. progressbar{    position:relative;    margin:100px Auto;    width:100px;    height:100px;    border:20px solid #ccc;    border-radius:50%;}. left-container,.right-container{    Position:absolute;    width:70px;    height:140px;    top:-20px;    Overflow:hidden;    Z-index:1;}. left-container{left    : -20px;}. right-container{right    : -20px;}. left-circle,.right-circle{    Position:absolute;    top:0;    width:100px;    height:100px;    border:20px solid transparent;       border-radius:50%;    Transform:rotate ( -135deg);    Transition:all. 5s linear;    Z-index:2;}. left-circle{    left:0;    border-top-color:20px solid blue;    border-left-color:20px solid blue;}. right-circle{    border-right-color:20px solid blue;    border-bottom-color:20px solid blue;    right:0;}

Second: Control the progress bar JS

In order to make the logic of the progress bar more robust, the implementation of the JS part needs to consider four things:

1, the base value of the change after the value of the same on the right progress,

2, the base value on the right, the changed value on the left,

3, the value of the base value changes after the same on the left,

4, the base value on the left, the changed value on the right.

In that case, the core needs to consider only two points: the change in angle and the amount of time used.

In the first case, it is relatively simple to calculate the angle changes and how much time to use. First, you need to set the time value required to change the entire semicircle. Once set, the time value required to calculate the angle of change is immediately calculated based on the scale. The code is as follows:

Time = (curpercent-oldpercent)/50 * basetime;     Determine if the time value is positive     curpercent-oldpercent > 0? ": Time =-time;     deg = curpercent/50*180-135;

In the second case, a little bit of trouble. Because there is a transition from the right progress to the left progress. In order to make the progress smooth change, here we need to use the timer, after changing the right part, then modify the left part. The code is as follows:

Set progress to the right time  = (50-oldpercent)/50 * basetime;deg = (50-oldpercent)/50*180-135; $rightBar. css ({    transform: ' R Otate (' + deg+ ' deg) ',    transition: ' All ' + time + ' s linear '})//Delay Setting the left progress bar Change settimeout (function () {Time    = (curper CENT-50)/50;    deg = (curPercent-50)/50*180-135;    $leftBar. css ({        transform: ' Rotate (' + deg+ ' deg) ',        transition: ' All ' + time + ' s linear '    })}, Math.floor (Time *1000)); 000));

The third and fourth cases are similar to the previous one and are no longer discussed here.

The code for the complete control of the progress bar function is as follows (implemented using jquery):

/** * Set the change of the progress bar * @param {number} oldpercent before the progress bar changes the half-ratio * @param {#} curpercent the current value of the progress bar to be set * @return { The Boolean} setting returns true successfully, otherwise, returns Fasle */function Setprogessbar (oldpercent, curpercent) {var $leftBar = $ (' #left-ba        R ');        var $rightBar = $ (' #right-bar ');        Converts the passed in parameter, allowing the string representation of the number oldpercent = + oldpercent;        Curpercent = + curpercent;            Detection parameters, if not number type or not in 0-100, do not execute if (typeof oldpercent = = = ' number ' && typeof curpercent = = = ' Number ' && oldpercent >= 0 && oldpercent <= && curpercent <= && curpercent    ; = 0) {var basetime = 1;    The default time to change the semicircle progress, the unit of the second var = 0;     Time the progress bar changed var deg = 0;                    Progress bar Change Angle if (Oldpercent > 50) {//original progress is greater than if (CURPERCENT&GT;50) {//Set left progress                    Time = (curpercent-oldpercent)/50 * basetime;             Determines whether the time value is positive       Curpercent-oldpercent > 0?                    ": Time =-time;                    deg = curpercent/50*180-135;  $leftBar. CSS ({transform: ' rotate (' + deg+ ' deg) ', Transition: ' All ' + time + ' s Linear '})}else{//Set progress to the Left time = (OLDP                    ERCENT-50)/50 * basetime;                    deg = (oldPercent-50)/50*180-135;  $leftBar. CSS ({transform: ' rotate (' + deg+ ' deg) ', Transition: ' All ' + time                        + ' s Linear '})//Delay setting to the right of the progress bar changes setTimeout (function () {                        Time = (50-curpercent)/50;                        deg = (50-curpercent)/50*180-135;  $rightBar. CSS ({transform: ' rotate (' + deg+ ' deg) ', Transition: ' All               ' + time + ' s linear '         })}, Math.floor (time*1000)); }}else{//original progress is less than 50 o'clock if (curpercent>50) {//Set the progress to the right of TI                    me = (50-oldpercent)/50 * basetime;                    deg = (50-oldpercent)/50*180-135; $rightBar. CSS ({transform: ' rotate (' + deg+ ' deg) ', Transition: ' All ' + Tim                        E + ' s linear '})//Delay Setting the left progress bar changes setTimeout (function () {                        Time = (curPercent-50)/50;                            deg = (curPercent-50)/50*180-135; $leftBar. CSS ({transform: ' rotate (' + deg+ ' deg) ', Transition: ' All                ' + time + ' s linear ')}, Math.floor (time*1000)); }else{//Set progress to the right time = (curpercent-oldpercent)/50 * BASETIME; Determine if the time value is positive curpercent-oldpercent > 0?                    ": Time =-time;                    deg = curpercent/50*180-135; $rightBar. CSS ({transform: ' rotate (' + deg+ ' deg) ', Transition: ' All ' + Tim            E + ' s Linear '})} return true;        }}else{return false; }    }

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:

How the absolute positioning of CSS is compatible with all resolutions

Properties of CSS3 Transition, animation, transform

Double-wing layout and the Holy Grail layout and graphic explanation