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>GeeksForGeeks</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:
Progress bar example
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>GeeksforGeeks</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:
<progress> tag
The HTML global attributes are also supported by the <progress> tag. The HTML event attributes are also supported by the <progress> tag.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
25 Mar, 2021
Like Article
Save Article