JQuery + CSS two methods for implementing the ring progress bar tutorial

An interesting effect recently encountered in the project is the circular progress bar, which is similar to the following:

 

There are many ways to achieve this effect. I mainly thought about two solutions, which are implemented through jQuery and CSS. Here is one of them:

Method 1: jQuery + CSS3

Implementation principle

The principle is very simple. In this solution, the rotate and clip attributes of CSS3 in the transform of CSS3 are mainly used. 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. It is only used to show the effect */
Clip: rect (0, auto, auto, 75px );}

It is quite easy to implement the semi-circle, using border-radius to make the rounded corner, and then using clip to make the shear effect. (For more information about how to use clip, see the site introduction ), the mask part is designed to block external containers, resulting in a ring effect visually:

 

If it is rotated, it is easier to implement, that is, add it to the CSS right (I have not done 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 class = "pie_right"> <div class = "right"> </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: #00 aacc;
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'form .css ('transform', "rotate (" + num + "deg )");
} Else {
(This).find('.right'form .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.

JQuery + image

Implementation principle

This method is relatively simple, but it is also quite troublesome.

First, we need a very lengthy image ...... The image content is the rotation angle of every 1 °. It is an image... 100 sheets...

For example:

 

Then let the container set this image as the background. The reason is to use background-position to write 100 class styles for background offset... Tired .... Each time the progress changes, the corresponding class is referenced.

HTML

We have a structure like this. Of course there are many such structures:

 

 

<Div class = "progressbar">
<Span> 0 </span> %
</Div>

 

 

For example, the structure of our case is as follows:

 

 

<Div class = "progressbar">
<Span> 10 </span> %
</Div>
<Div class = "progressbar">
<Span> 20 </span> %
</Div>
<Div class = "progressbar">
<Span> 30 </span> %
</Div>
<Div class = "progressbar">
<Span> 50 </span> %
</Div>
<Div class = "progressbar">
<Span> 70 </span> %
</Div>
<Div class = "progressbar">
<Span> 90 </span> %
</Div>
<Div class = "progressbar">
<Span> 100 </span> %
</Div>

 

 

CSS

Style is a tough task. We need to modify its background-position in each position. That is, from 0% ~ 100%, there will be 100:

. Progressbar {
Text-align: center;
Line-height: 44px;
Width: 44px;
Display: block;
Background: url(progressbar.png );
Height: 44px;
Font-size: 14px;
Margin-left: 60px;
}
. Progressbar-1 {background-position: 0px 0px ;}
. Progressbar-2 {background-position:-54px 0px ;}
. Progressbar-3 {background-position:-pixel 0px ;}
. Progressbar-4 {background-position:-162px 0px ;}
. Progressbar-5 {background-position:-216px 0px ;}
. Progressbar-6 {background-position:-270px 0px ;}
. Progressbar-7 {background-position:-324px 0px ;}
. Progressbar-8 {background-position:-pixel 0px ;}
. Progressbar-9 {background-position:-432px 0px ;}
. Progressbar-10 {background-position:-486px 0px ;}
. Progressbar-11 {background-position:-540px 0px ;}
. Progressbar-12 {background-position:-594px 0px ;}
. Progressbar-13 {background-position:-648px 0px ;}
. Progressbar-14 {background-position:-702px 0px ;}
. Progressbar-15 {background-position:-756px 0px ;}
. Progressbar-16 {background-position:-810px 0px ;}
. Progressbar-17 {background-position:-864px 0px ;}
. Progressbar-18 {background-position:-918px 0px ;}
. Progressbar-19 {background-position:-972px 0px ;}
. Progressbar-20 {background-position:-1026px 0px ;}
. Progressbar-21 {background-position:-1080px 0px ;}
. Progressbar-22 {background-position:-1134px 0px ;}
. Progressbar-23 {background-position:-1188px 0px ;}
. Progressbar-24 {background-position:-1242px 0px ;}
. Progressbar-25 {background-position:-1296px 0px ;}
. Progressbar-26 {background-position:-1350px 0px ;}
. Progressbar-27 {background-position:-1404px 0px ;}
. Progressbar-28 {background-position:-1458px 0px ;}
. Progressbar-29 {background-position:-1512px 0px ;}
. Progressbar-30 {background-position:-1566px 0px ;}
. Progressbar-31 {background-position:-1620px 0px ;}
. Progressbar-32 {background-position:-1674px 0px ;}
. Progressbar-33 {background-position:-1728px 0px ;}
. Progressbar-34 {background-position:-1782px 0px ;}
. Progressbar-35 {background-position:-1836px 0px ;}
. Progressbar-36 {background-position:-1890px 0px ;}
. Progressbar-37 {background-position:-1944px 0px ;}
. Progressbar-38 {background-position:-1998px 0px ;}
. Progressbar-39 {background-position:-2052px 0px ;}
. Progressbar-40 {background-position:-2106px 0px ;}
. Progressbar-41 {background-position:-2160px 0px ;}
. Progressbar-42 {background-position:-2214px 0px ;}
. Progressbar-43 {background-position:-2268px 0px ;}
. Progressbar-44 {background-position:-2322px 0px ;}
. Progressbar-45 {background-position:-2376px 0px ;}
. Progressbar-46 {background-position:-2430px 0px ;}
. Progressbar-47 {background-position:-2484px 0px ;}
. Progressbar-48 {background-position:-2538px 0px ;}
. Progressbar-49 {background-position:-2592px 0px ;}
. Progressbar-50 {background-position:-2700px 0px ;}
. Progressbar-51 {background-position:-2754px 0px ;}
. Progressbar-52 {background-position:-2808px 0px ;}
. Progressbar-53 {background-position:-2862px 0px ;}
. Progressbar-54 {background-position:-2916px 0px ;}
. Progressbar-55 {background-position:-2970px 0px ;}
. Progressbar-56 {background-position:-3024px 0px ;}
. Progressbar-57 {background-position:-3078px 0px ;}
. Progressbar-58 {background-position:-3132px 0px ;}
. Progressbar-59 {background-position:-3186px 0px ;}
. Progressbar-60 {background-position:-3240px 0px ;}
. Progressbar-61 {background-position:-3294px 0px ;}
. Progressbar-62 {background-position:-3348px 0px ;}
. Progressbar-63 {background-position:-3402px 0px ;}
. Progressbar-64 {background-position:-3456px 0px ;}
. Progressbar-65 {background-position:-3510px 0px ;}
. Progressbar-66 {background-position:-3564px 0px ;}
. Progressbar-67 {background-position:-3618px 0px ;}
. Progressbar-68 {background-position:-3672px 0px ;}
. Progressbar-69 {background-position:-3726px 0px ;}
. Progressbar-70 {background-position:-3780px 0px ;}
. Progressbar-71 {background-position:-3834px 0px ;}
. Progressbar-72 {background-position:-3888px 0px ;}
. Progressbar-73 {background-position:-3942px 0px ;}
. Progressbar-74 {background-position:-3996px 0px ;}
. Progressbar-75 {background-position:-4050px 0px ;}
. Progressbar-76 {background-position:-defaults 4px 0px ;}
. Progressbar-77 {background-position:-defaults 8px 0px ;}
. Progressbar-78 {background-position:-4212px 0px ;}
. Progressbar-79 {background-position:-defaults 6PX 0px ;}
. Progressbar-80 {background-position:-4320px 0px ;}
. Progressbar-81 {background-position:-4376px 0px ;}
. Progressbar-82 {background-position:-4428px 0px ;}
. Progressbar-83 {background-position:-4482px 0px ;}
. Progressbar-84 {background-position:-4536px 0px ;}
. Progressbar-85 {background-position:-4590px 0px ;}
. Progressbar-86 {background-position:-4644px 0px ;}
. Progressbar-87 {background-position:-4698px 0px ;}
. Progressbar-88 {background-position:-4752px 0px ;}
. Progressbar-89 {background-position:-4806px 0px ;}
. Progressbar-90 {background-position:-4860px 0px ;}
. Progressbar-91 {background-position:-4914px 0px ;}
. Progressbar-92 {background-position:-4968px 0px ;}
. Progressbar-93 {background-position:-5022px 0px ;}
. Progressbar-94 {background-position:-5076px 0px ;}
. Progressbar-95 {background-position:-5130px 0px ;}
. Progressbar-96 {background-position:-5184px 0px ;}
. Progressbar-97 {background-position:-5238px 0px ;}
. Progressbar-98 {background-position:-5292px 0px ;}
. Progressbar-99 {background-position:-5346px 0px ;}
. Progressbar-100 {background-position:-5400px 0px ;}

JavaScript

Of course, in this effect, we cannot do without JavaScript:

$ (Function (){
$ ('. Progressbar'). each (function (index, el ){
Var num = $ (this). find ('span '). text ();
$ (This). addClass ('ssssbar-'+ num );
});
});

 

The effect is as follows:

 

Although this method is cumbersome and cumbersome, the implementation effect is also richer than that of pure css3, and the compatibility is better.

Here, this case is complete. Let's look at the effect that everyone prefers. I feel that each has its own advantages and disadvantages. If you have better methods and ideas, you are welcome to discuss them together.