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. Progress bar

　1.1 Features

　1.2 Example

2. Measurement Bar

　2.1 Features

　2.2 Example

1. 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. 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

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

Example 3: value = max(max defaults to 1.0)

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

Example 4: value > max (max defaults to 1.0)

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

Example 5: value

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

示例6：value = min(min默认为0)

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

 

示例7：value > min(min默认为0)

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

 

示例8：value

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

 

示例9：value = high

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

 

示例10：value > high

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

 

示例11：value

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

  

示例12：value = low

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

 

示例13：value > low

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

 

示例14：optimum

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

 

示例15：low

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

 

示例16：low

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

 

示例17：value

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

 

示例18：optimum

进度：<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!