Javascript and CSS3 progress bar

Javascript and CSS3 progress bar
Javascript and CSS3 implementation progress bar effect 1: the clip attribute of css2 implements the webpage progress bar. before implementation, we will introduce the clip attribute, because this attribute is rarely used in css2.1, so we need to know about the degree of browser support: all mainstream browsers support the clip attribute. The Clip attribute is described on the w3c official website as follows: You can crop elements to control the visible area of the elements. By default, the elements are not cropped. The Clip cropping syntax is as follows :. xx {clip: rect (<top>, <right>, <bottom>, <left>)} The Rect attribute requires four values: top, right, bottom, left; they must be separated by commas. Follow the clockwise rotation rule, which is the same as the margin and padding writing sequence in our css. In css2.1, the <top> and <bottom> offset of rect () are counted from the top edge of the element's box. <left>, <right> the specified offset is calculated from the left edge of the element's box. As follows: Let's take a look at a simple demo. The following css p # one {clip: rect (5px, 40px, 45px, 5px);} p # two {clip: rect (5px, 55px, 45px, 5px);} the above example is to cut rows in the 50X55px rectangle box to obtain the rectangle of the dotted line: now let's take a look at the demo of a progress bar. the HTML code is as follows: