The HTML <progress> tag is used to display the progress of a task or operation. It is commonly used for loading indicators, file uploads, and task completion status.
- Represents the progress of a task using a progress bar.
- Commonly used for downloads, uploads, and loading processes.
- Supports attributes like value and max to define progress status.
Syntax:
<progress attributes...> </progress>Attributes
- max: max represents the total work that is to be done to complete a task.
- value: value represents the amount of work that is already completed.
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.
Example 1: Implementation of progress tag.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
Downloading progress for a song:
<!--HTML progress tag starts here-->
<!--Driver Code Ends-->
<progress value="57"
max="100">
</progress>
<!--Driver Code Starts-->
<!--HTML progress tag ends here-->
</body>
</html>
<!--Driver Code Ends-->
Example 2: Implementation of progress tag.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Progress Example</title>
<style>
body {
text-align: center;
padding: 50px;
font-family: Arial, sans-serif;
}
</style>
</head>
<!--Driver Code Ends-->
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Task Progress</h3>
<progress value="50" max="100"></progress>
<p>50% Complete</p>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->