HTML5 progress and meter controls, html5meter

HTML5 progress and meter controls, html5meter

In HTML5, the progress and meter controls are added. The SS control is a progress bar control that describes the progress of a task, such as the installation of software in Windows and the copy of files. The meter control is a measurement bar control, indicating a certain amount of measurement, suitable for temperature, weight, amount, and other quantitative performance.

Directory

1. <progress> progress bar

1.1 features

1.2 example

2. <meter> measurement bar

2.1 features

2.2 example

 

1. <progress> progress bar

Description: Indicates the progress of the task, such as the installation of software in Windows and the copy of files.

1.1 features

Syntax:

<progress value="0.5">50%</progress>

Attribute:

Max {number}: set or obtain the maximum value of the progress bar.

Default Value: If this property is not set, the maximum value of the control is 1.

Value {number}: set or obtain the current value of the progress bar.

Default Value: if this value is not set, the progress bar is 'uncertain 'with no specific progress information. If there is no max attribute (the maximum progress bar is 1 by default ), the default value range of value is 0.01 ~ 1.0. When 0.2 is set, the progress of 20% is displayed.

Supported by the lowest browser version: IE 10, Chrome 8

Control content: When the browser does not support this control, the content in the control is displayed. browsers that support this control do not display the control content.

 

1.2 Example 1: contains the value Attribute

Progress: <progress value = "0.25"> 25% </progress>

 

 

Example 2: contains the max attribute

Progress: <progress max = "100" value = "25"> 25% </progress>

 

 

Example 3: uncertain progress bar (no value attribute)

Progress: <progress> downloading... </progress>

IE8: Displays text.

IE11: Displays an animation from left to right.

Chrome: Displays an animation from left to right and then from right to left.

 

 

2. <meter> measurement bar

Description: Represents a certain amount of measurement, suitable for temperature, weight, amount and other quantitative performance.

2.1 features

Syntax:

Progress: <meter value = "0.5"> </meter>

Attribute:

Value {number}: set or obtain the value of this control, which must be in the middle of the min and max values.

Max {number}: set the maximum value of this control.

Default Value: If this property is not set, the maximum value of the control is 1.

Min {number}: set the minimum value of this control.

Default Value: If this property is not set, the minimum value of the control is 0.

Low {number}: Specifies the threshold. When the value is smaller than low and greater than min, the color is too low.

High {number}: sets an excessively high threshold. When the value is greater than high and less than max, the color is too high.

Optimum {number}: Set the optimal value,

Supported by the lowest browser version: Not supported by IE, Chrome 8

Control content: When the browser does not support this control, the content in the control is displayed. browsers that support this control do not display the control content.

 

2.2 Example 1: No attribute

Progress: <meter> </meter>

 

 

Example 2: value <max (1.0 by default)

Progress: <meter value = "0.5"> </meter>

 

 

Example 3: value = max (1.0 by default)

Progress: <meter value = "1"> </meter>

 

 

Example 4: value> max (1.0 by default)

Progress: <meter value = "5"> </meter>

 

 

Example 5: value <min (min is 0 by default)

Progress: <meter value = "-0.5"> </meter>

 

 

Example 6: value = min (min is 0 by default)

Progress: <meter value = "0"> </meter>

 

 

Example 7: value> min (min is 0 by default)

Progress: <meter value = "0.5"> </meter>

 

 

Example 8: value Progress: <meter value = "0.5" high = "0.8"> </meter>

 

 

Example 9: value = high

Progress: <meter value = "0.8" high = "0.8"> </meter>

 

 

Example 10: value> high

Progress: <meter value = "0.9" high = "0.8"> </meter>

 

 

Example 11: value <low

Progress: <meter value = "0.1" low = "0.25"> </meter>

 

 

Example 12: value = low

Progress: <meter value = "0.25" low = "0.25"> </meter>

 

 

Example 13: value> low

Progress: <meter value = "0.5" low = "0.25"> </meter>

 

 

Example 14: optimum <low <value Progress: <meter low = "0.25" optimum = "0.15" high = "0.75" value = "0.5"> </meter>

 

 

Example 15: low <optimum = value Progress: <meter low = "0.25" optimum = "0.5" high = "0.75" value = "0.5"> </meter>

 

 

Example 16: low <value Progress: <meter low = "0.25" optimum = "0.85" high = "0.75" value = "0.5"> </meter>

 

 

Example 17: value <low Progress: <meter low = "0.25" optimum = "0.85" high = "0.75" value = "0.2"> </meter>

 

 

Example 18: optimum <low Progress: <meter low = "0.25" optimum = "0.2" high = "0.75" value = "0.8"> </meter>

 

 

====================================== Series of articles ==============================================

This article: 6.5 HTML5 progress and meter controls

Web development path Series