How to specify how much work the task requires in total in HTML5 ?
The <progress> tag shows how much a task is completed.
Attributes:
- max: The overall amount of work required for the mission. 1 is the default value.
- value: Indicates the proportion of the task that has been completed.
Notes:
To display the progress of a task, use the <progress> tag in accordance with JavaScript. The <progress> tag is not used to reflect a gauge (e.g. disk space usage or relevance of a query result). Instead, use the <meter> tag to display a gauge. For best accessibility practices, do use the <label> tag.
Example 1: The following example demonstrates to use of the <progress> tag to display a progress bar.
HTML
<!DOCTYPE html> < html > < body > < h1 >w3wiki</ h1 > < h2 >Java Collections and Frameworks</ h2 > < label for = "course" > Downloading course in progress : </ label > < progress id = "course" value = "72" max = "100" > 72% </ progress > </ body > </ html > |
Output:
Example 2: The following example demonstrates how to represent the rating for different programming languages.
HTML
<!DOCTYPE html> < html > < head > < style > h1 { text-align: center; color: green; } h2 { text-align: left; color: red; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >Programming Language Rating</ h2 > < label for = "C++" >C++ ::</ label > < progress id = "C++" value = "32" max = "100" > 62% </ progress > < br />< br /> < label for = "J" >Java ::</ label > < progress id = "J" value = "84" max = "100" > 84% </ progress > < br />< br /> < label for = "P" >Python ::</ label > < progress id = "P" value = "42" max = "100" > 42% </ progress > < br />< br /> < label for = "H" >HTML ::</ label > < progress id = "H" value = "70" max = "100" > 70% </ progress > < br />< br /> < label for = "C" >CSS ::</ label > < progress id = "C" value = "55" max = "100" > 55% </ progress > < br />< br /> < label for = "JS" >JavaScript ::</ label > < progress id = "JS" value = "28" max = "100" > 28% </ progress > </ body > </ html > |
Output:
The HTML global attributes are also supported by the <progress> tag. The HTML event attributes are also supported by the <progress> tag.
Contact Us