HTML 5 <progress> Tag
Last Updated :
14 Dec, 2023
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
max
|
It represents the total work that is to be done to complete a task.
|
value
|
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 >GeeksforGeeks</ h1 >
Downloading progress for a song:
< progress value = "57"
max = "100" >
</ progress >
</ 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;" >
GeeksforGeeks
</ 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
Share your thoughts in the comments
Please Login to comment...