HTML <progress> Tag
The <progress> tag is one of the HTML5 elements. It is used to display the progress of a task (progress bar). Dynamically changing values of the progress bar must be defined with scripts (JavaScript).
The appearance of the element can differ, depending on the browser and operating system.
We recommend using the <meter> tag to represent a gauge (e.g., the relevance of a query result).
Syntax
The <progress> tag comes in pairs. The content is written between the opening (<progress>) and closing (</progress>) tags.
Example of the HTML <progress> tag:
HTML <progress> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<span>Loading:</span>
<progress value="35" max="100" aria-label="Loading progress"></progress>
</body>
</html>Result
Progress bar
A progress bar can be indeterminate or determinate.
It's easier to style the indeterminate progress bar, as it doesn't have the value attribute. We can style it using the CSS negation clause :not().
The determinate progress bar is targeted by the progress[value] selector. Add dimensions to your progress bar with the CSS width and height properties and set the appearance to none:
Styling progress bars
WebKit/Blink (Chrome/Safari/Opera)
Chrome, Safari, and the latest version of Opera (16+) belong to this category. Styling the appearance of the <progress> element can be done with the use of -webkit-appearance: progress-bar.
Set -webkit-appearance: none; to reset the default styles.
Example of a progress bar
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 200px;
height: 15px;
}Example of the determinate state of the progress bar:
Example of a determinate progress bar:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 200px;
height: 15px;
}
</style>
</head>
<body>
<span>Loading:</span>
<progress value="30" max="100" aria-label="Loading progress"></progress>
</body>
</html>After this, you may have problems because separate pseudo-elements are provided by different browsers for styling the progress bar. To solve this problem, you can use fallbacks.
WebKit/Blink provides two pseudo-elements:
::-webkit-progress-bar, which styles the progress element container.::-webkit-progress-value, which styles the value inside the progress bar.
Style the ::-webkit-progress-bar with different CSS properties:
Example of a progress bar
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.26) inset;
}Style the ::-webkit-progress-value, which is the same as the bar, with several gradient backgrounds for different purposes. Use the -webkit- prefix for the gradients:
webkit-progress-value
progress[value]::-webkit-progress-value {
background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .2) 33%, rgba(0, 0, 0, .2) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #1000ff, #359900);
border-radius: 4px;
background-size: 20px 15px, 100% 100%, 100% 100%;
}Example of the HTML <progress> tag used with CSS properties:
Example of the HTML <progress> tag with CSS properties:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 200px;
height: 15px;
}
progress[value]::-webkit-progress-bar {
background-color: #cccccc;
border-radius: 4px;
}
progress[value]::-webkit-progress-value {
background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .2) 33%, rgba(0, 0, 0, .2) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #1000ff, #359900);
border-radius: 4px;
background-size: 20px 15px, 100% 100%, 100% 100%;
}
</style>
</head>
<body>
<span>Loading:</span>
<progress value="55" max="100" aria-label="Loading progress"></progress>
</body>
</html>Firefox
By using appearance: none we can remove the default bevel and emboss. However, this leaves a slight border in Firefox, which can be removed by using border: none. This solves the border issue with Opera 12 as well.
Example of the <progress> bar on Firefox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
width: 200px;
height: 15px;
}
</style>
</head>
<body>
<span>Loading:</span>
<progress value="55" max="100" aria-label="Loading progress"></progress>
</body>
</html>Firefox provides a single pseudo-element (::-moz-progress-bar) that can be used to target the progress bar value. In other words, we cannot style the background of the container in Firefox.
HTML <progress> Tag - Firefox
progress[value]::-moz-progress-bar {
background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)), -moz-linear-gradient( left, #ff00f7, #4e922a);
background-size: 35px 20px, 100% 100%, 100% 100%;
}Firefox doesn't support the ::before or ::after pseudo-elements on the progress bar, and doesn't allow CSS3 keyframe animation on the progress bar, which provides a reduced experience.
Example of the HTML <progress> tag for Firefox:
Example of the HTML <progress> tag for Firefox:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
progress[value]::-moz-progress-bar {
background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%,
rgba(0, 0, 0, 0.1) 66%, transparent 66%),
-moz-linear-gradient( top, rgba(255, 255, 255, 0.25),
rgba(0, 0, 0, 0.25)),
-moz-linear-gradient( left, #ff00f7, #4e922a);
background-size: 35px 20px, 100% 100%, 100% 100%;
}
</style>
</head>
<body>
<span>Loading:</span>
<progress value="35" max="100" aria-label="Loading progress"></progress>
</body>
</html>Example of a cool progress bar use case by scrolling the page!
Here's an example of how to create a progress bar that shows how far you have scrolled down the page:
example of how to create a progress bar that shows how far you have scrolled down the page
<!DOCTYPE html>
<html>
<head>
<style>
#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #ddd;
}
#progress-bar-fill {
height: 100%;
background-color: blue;
width: 0%;
}
</style>
</head>
<body>
<div id="progress-bar">
<div id="progress-bar-fill"></div>
</div>
<h1>Scrollable Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<script>
window.addEventListener("scroll", function () {
var progressBarFill = document.getElementById("progress-bar-fill");
var scrollPosition = window.scrollY;
var totalHeight = document.body.scrollHeight - window.innerHeight;
var percentage = (scrollPosition / totalHeight) * 100;
progressBarFill.style.width = percentage + "%";
});
</script>
</body>
</html>In this example, we have a fixed position div element with an id of progress-bar that serves as the container for the progress bar. Inside this container, we have another div element with an id of progress-bar-fill that serves as the actual progress bar.
We've used CSS to set the initial width and height of the progress bar, as well as the background colors for the progress bar and the progress bar fill.
We've also included a JavaScript event listener that listens for the scroll event on the window object. When the user scrolls the page, we calculate the scroll position and the total height of the page, and then calculate the percentage of the page that has been scrolled. We update the width property of the progress-bar-fill element to reflect this percentage, thereby updating the progress bar.
You can copy this code into a new HTML file and open it in your web browser to see how it looks. As you scroll down the page, the progress bar will update to reflect how far you have scrolled. You can adjust the height and color of the progress bar to suit your needs.
Attributes
| Attribute | Value | Description |
|---|---|---|
| max | number | Defines the maximum value of the current process. The value can be a positive number bigger than 0. |
| value | number | Defines the size of the completed task. The value can be a number from 0 to the number indicated in the max attribute, or a number in the range from 0 to 1 if the max attribute isn’t specified. |
The <progress> tag also supports the Global Attributes and the Event Attributes.
Practice
What does the HTML progress tag represent?