Introduction and compatibility of progress bar SS in HTML5, html5progress

Introduction and compatibility of progress bar SS in HTML5, html5progress

1. Basic understanding of progress Elements
1. Basic UI
The progress element belongs to the HTML5 family and refers to the progress bar. IE10 + and other reliable browsers are supported. Simple code:

Copy XML/HTML Code to clipboard

1. <Progress> o (︶ ︿ ︶) o </progress>

It's a progress bar with a sense. Someone is surprised: "Alas ~ How can I see a Letter of emotion ?" Well... I can only say to you: "If you despise you, are you reluctant to use a reliable browser ?!"
The default effect varies with different browsers, as shown below (in window 7 ):

The effect of IE10 granules on slow and scattered particles is quite eye-catching.

2. Basic Attributes
Max, value, position, and labels.
(1) max refers to the maximum value. By default, the Progress value ranges from 0.0 ~ 1.0. If it is set to max = 100, the Progress value range is from 0 ~ 100.
(2) value is the value. If max = 100 and value = 50, the progress is exactly half. The existence of the value Attribute determines whether the progress bar of the progress is deterministic. What does it mean? For example, if <progress> </progress> has no value, it is uncertain. Therefore, in IE10 browser, it looks like an infinite loop of virtual point animation. However, once the value attribute is available (even if there is no value), such as <progress value> </progress>, it is also regarded as OK. The dotted point animation enters the XianRen mode --> changed the bar, as follows:

(3) position is a read-only attribute. It indicates the position of the current progress, that is, the value of value/max. If the progress bar is uncertain, the value is-1.
(4) labels is also a read-only attribute, and the label elements pointing to the progress element are obtained. For example, document. querySelector ("progress ).

Ii. Example of progress element compatibility Processing
Html code

Copy XML/HTML Code to clipboard

1. <Progress max = "100" value = "20"> <ie style = "width: 20%;"> </ie> </progress>

Css compatible code

Copy the content to the clipboard using CSS Code.

1. Progress {
2. Display: inline-block;
3. Width: 160px;
4. Height: 20px;
5. Border: 1px solid #0064B4;
6. Background-color: # e6e6e6;
7. Color: #0064B4;/* IE10 */
8. }
9. /* Ie6-ie9 */
10. Progress ie {
11. Display: block;
12. Height: 100%;
13. Background: #0064B4;
14. }
15. Progress:-moz-progress-bar {background: #0064B4 ;}
16. Progress:-webkit-progress-bar {background: # e6e6e6 ;}
17. Progress:-webkit-progress-value {background: #0064B4 ;}

Basically, the perfect solution solves the differences between browsers.