HTML5 Progress and meter controls

In HTML5, the progress and meter controls are added. The progress control is a progress bar control that represents the progress of a task, such as the installation of software in a Windows system, the copying of files, and so on. The meter control is a metering bar control that represents a measure that is suitable for quantifying performance such as temperature, weight, and amount.

Directory

1. <progress> Progress bar

1.1 Features

1.2 Example

2. <meter> Metering Bar

2.1 Features

2.2 Example

1. <progress> Progress bar

Description : Represents the progress of a task, such as the installation of software in a Windows system, the copying of files, and so on.

1.1 Features

Syntax :

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

Properties :

Max {Number}: Sets or gets 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}: Sets or gets the current value of the progress bar.

Default value: When this value is not set, this progress bar is ' indeterminate ' type, no specific progress information, no Max property (the progress bar by default is up to 1), value has a default range of 0.01~1.0, and setting 0.2 indicates the progress of 20%.

Minimum Browser version support : IE 10, Chrome 8

control content : When the browser does not support this control, the contents of the control are displayed, and the browser that supports the control does not show the contents of the control.

1.2 ExampleExample 1: Containing the Value property

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

Example 2: containing the Max property

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

Example 3: Indeterminate progress bar (no Value property)

Progress: <progress > Downloading ...</progress>

IE8 : Displays text content.

IE11 : Displays a left-to-right animation effect.

Chrome : Displays a left-to-right, then right-to-left animation effect.

2. <meter> Metering Bar

Description : Represents a measure that is suitable for the quantification of temperature, weight, and amount.

2.1 Features

Grammar:

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

Properties :

value {Number}: Sets or gets the value of this control, which must be in the middle of min and Max values.

Max {Number}: Sets the maximum value for this control.

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

min {Number}: Sets the minimum value for this control.

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

Low {Number}: Sets the threshold for the bottom and displays too low a color when value is less than and greater than Min.

High {Number}: Sets a threshold that is too high and displays too much color when value is greater than high and less than Max.

Optimum {Number}: Set the best value,

Minimum Browser version support : IE not supported, Chrome 8

control content : When the browser does not support this control, the contents of the control are displayed, and the browser that supports the control does not show the contents of the control.

2.2 Example Example 1: no attribute

Example 2:value < MAX (max defaults to 1.0)

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

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

Example 5:value < min (min defaults to 0)

Example 6:value = min (min defaults to 0)

Example 7:value > min (min defaults to 0)

Example 8:value < high

Example 9:value = high

Example 10:value > High

Example 11:value < low

Example 12:value = Low

Example 13:value > Low

Example 14:optimum < Low < value < high

Example 15:low < optimum = value < high

Example 16:low < value < High < optimum

Example 17:value < Low < High < optimum

Example 18:optimum < Low < High < value

================================== Series article ==========================================

This article: 6.5 HTML5 progress and meter controls

Web Development Road Series articles

HTML5 Progress and meter controls