The <progress> tag is one of the HTML5 elements. It is used to display the progress of the task (progress bar). Dynamically changing values of the progress bar must be defined with the 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:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<span>Loading:</span>
<progress value="35" max="100"></progress>
</body>
</html>Result
Progress bar
A progress bar can be indeterminate and 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.
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 200px;
height: 15px;
}Example of the determinate state of the 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"></progress>
</body>
</html>After this, you may have problems because separate pseudo-classes are provided by different browsers for styling the progress bar. To solve this problem, you can use fallbacks.
WebKit/Blink provides two pseudo-classes:
- -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:
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:
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:
<!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"></progress>
</body>
</html>Firefox
By using appearence: 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.
<!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"></progress>
</body>
</html>Firefox provides a single pseudo-class (-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.
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-classes 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:
<!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"></progress>
</body>
</html>Attributes
| Attribute | Value | Description |
|---|---|---|
| max | number | Defines the maximum volume of the current process. The value can be a positive number bigger than the 0. |
| value | number | Defines the size of the already completed task volume. The value can be a number from 0 to numbers, 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.
Browser support
|
|
|
|
|---|---|---|---|
| 8+ | 16+ | 6+ | 11+ |