HTML 5 <progress> Tag
The HTML 5 <progress> Tag is used to represent the progress of a task. It is similar to an indicator that displays the progress of completing a task. It is not used to represent the disk space or relevant query.
Note: This tag is used in conjunction with JavaScript to display the progress of a task. The <progress>
tag also supports the Global Attributes and Event Attributes in HTML.
Syntax
<progress attributes...> </progress>
Attributes
Attributes |
Descriptions |
---|---|
It represents the total work that is to be done to complete a task. |
|
It represents the amount of work that is already completed. |
Example 1: In this example we will see the implementation of progress tag.
HTML
<!DOCTYPE html> < html > < body > < h1 >w3wiki</ h1 > Downloading progress for a song: <!--HTML progress tag starts here--> < progress value = "57" max = "100" > </ progress > <!--HTML progress tag ends here--> </ body > </ html > |
Output:
Example 2: In this example we will see the implementation of progress tag.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Progress Example</ title > < style > body { text-align: center; padding: 50px; font-family: Arial, sans-serif; } </ style > </ head > < body > < h1 style = "color: green;" > w3wiki </ h1 > < h3 >Task Progress</ h3 > < progress value = "50" max = "100" ></ progress > < p >50% Complete</ p > </ body > </ html > |
Output:
Supported Browsers
- Google Chrome 15
- Edge 12 and above
- Firefox 1 and above
- Opera 14 and above
- Safari 6 and above
Contact Us