progress and meter controls in HTML5

In HTML5, newly added progress and meter controls. The progress control is a progress bar control, which can indicate the progress of a task, such as the installation of software in a Windows system, the copying of files, and other scenarios. The meter control is a measurement bar control, which represents a certain measurement and is suitable for quantitative expressions such as temperature, weight, and amount.

Table of contents

1. 6ecb87e5318a36c03c59e25d55f43372 Progress bar

　1.1 Features

　1.2 Example

2. 49c6123c49c6be380cb91db06cd3bfa9 Measurement Bar

　2.1 Features

　2.2 Example

1. 6ecb87e5318a36c03c59e25d55f43372 Progress bar

Description: Indicates the progress of the task, For example, the progress of scenarios such as software installation and file copying in Windows systems.

1.1 Features

Syntax：

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

Attributes：

max {number}: Set or get the maximum value of the progress bar.

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

value {number}: Set or get the current value of the progress bar.

Default value: When this value is not set, the progress bar is of the 'uncertain' type, with no specific progress information; when there is no max attribute (the default maximum of the progress bar is 1), the default value range of value It is 0.01~1.0. When set to 0.2, it means 20% progress.

Minimum browser version support: IE 10, Chrome 8

Control content: When the browser does not support this control, the control will be displayed The content in the control will not be displayed by browsers that support this control.

1.2 Example

Example 1: Contains value attribute

进度：<progress value="0.25" >25%</progress>

Example 2 : Contains max attribute

进度：<progress max="100" value="25" >25%</progress>

Example 3: Uncertain progress bar (no value attribute)

进度：<progress >正在下载...</progress>

IE8 : Display text content .

IE11: Displays a animation effect from left to right.

Chrome: Displays an animation effect from left to right, then right to left.

##2. 49c6123c49c6be380cb91db06cd3bfa9 Measurement bar

Description: Indicates a certain measurement, suitable for temperature, weight, amount, etc. Quantitative performance.

2.1 Features

Syntax:

进度：<meter value="0.5"></meter>

Attributes:

value {number}: Set or get the value of this control, which must be between the min and max values.

max {number}: Set the maximum value of this control.

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

min {number}: Set the minimum value of this control.

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

low {number}: Set the threshold value that is too low. When the value is less than low and greater than min, the color that is too low is displayed.

high {number}: Set a threshold that is too high. When the value is greater than high and less than max, a color that is too high will be displayed.

optimum {number}: Set the optimal value,

Minimum browser version support: IE does not support, Chrome 8

Control content: When the browser does not support this control, the content in the control will be displayed. Browsers that support this control will not display the content of the control.

2.2 Example

Example 1: No attribute

进度：<meter></meter>

Example 2: value a3b77e03986e62c1622a2bbb390511e3 max (max defaults to 1.0)

进度：<meter value="5"></meter>

Example 5: value f38e8bf11e4a07ccd8a54eb2cf6cac89 min(min默认为0)

进度：<meter value="0.5"></meter>

 

示例8：value c0f00d6a63d1cdbbc9cc048ed668414e high

进度：<meter value="0.9" high="0.8"></meter>

 

示例11：value 8991c4cf6faf7bba1c504ded2b169f2e low

进度：<meter value="0.5" low="0.25"></meter>

 

示例14：optimum < low < value < high

进度：<meter low="0.25" optimum="0.15" high="0.75" value="0.5"></meter>

 

示例15：low < optimum = value < high

进度：<meter low="0.25" optimum="0.5" high="0.75" value="0.5"></meter>

 

示例16：low < value < high < optimum

进度：<meter low="0.25" optimum="0.85" high="0.75" value="0.5"></meter>

 

示例17：value < low < high < optimum

进度：<meter low="0.25" optimum="0.85" high="0.75" value="0.2"></meter

 

示例18：optimum < low < high < value

进度：<meter low="0.25" optimum="0.2" high="0.75" value="0.8"></meter>

 

The above is the detailed content of progress and meter controls in HTML5. For more information, please follow other related articles on the PHP Chinese website!