Problems encountered when making a circular progress bar in pure CSS3, and making a circular progress bar in css3

Problems encountered when making a circular progress bar in pure CSS3, and making a circular progress bar in css3

 

Recently, on the Development page, you need to create a dynamic circular progress bar. The first thing you think of is to use two rectangles, with the width equal to half of the diameter and the height equal to the diameter. The two rectangles are pasted together by float, set the overflow: hidden attribute. As a box, there is a sub-box with the same width and height. The upper left and lower left sides of the sub-box on the left and the upper right and lower right sides of the sub-box on the right use border-radius: radius, so that the two rectangles form a complete circle.

We have the sub-box on the left rotate 180 ° around the midpoint on the right, so that the left half circle is hidden, and the right half circle is the same. The transform-origin attribute is used to set the rotation center. The first value is the X axis and the second value is the Y axis. You can use left, right, top, bottom, you can also use numeric values for the words "center". The value is based on the upper left corner of the graph.

Then we set the border for the two half circles, and set the right border of the left half circle to none, and the left border of the right half circle to none. Now a complete ring is set, and the semi-circle is rotated through the animation. The border gradually enters the visible area from the hidden area. The effect we see is the loading process of the circular progress bar. As follows:

 

This method does not have much problems on the PC end. However, on the Mobile End, due to browser rendering and other problems, the rounded corner disappears during the rotation process, or the border is missing due to large serrations.

In this case, we don't need a border to make a progress bar. Instead, we will give the circle a background color and overwrite a circular mask with a slightly smaller radius on it. This way, a ring is missed and can be used as a progress bar to implement the above functions. As follows:

 

 

In addition, during the execution of this animation, I also found that the overflow: hidden style of an element was invalid. Later, I checked related articles on the Internet and found that overflow is worth the trouble when it is other than visible, when a transform occurs, it will be overwritten. Therefore, when a rotation animation occurs, overflowhidden will become invalid. In this case, we only need to add the z-index: 1 style to the invalid element to solve this problem.