How to Create a Progress Bar using HTML5 ?
Last Updated :
28 May, 2020
In this article, we are creating the progress bar of a task by using a <progress> tag. It is used to represent the progress of a task. It is also defined as how much work is done and how much is left. It is not used to represent the disk space or relevant query.
Syntax:
<progress attributes...> </progress>
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Represent the progress of a task
</title>
</head>
<body>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>
HTML5: How to represent
the progress of a task
</h2>
Downloading progress for a song:
<progress value="57" max="100">
</progress>
</body>
</html>
|
Output:
Supported Browsers are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...