| Parameter | Value |
| max | How much work the task requires in total |
| value | How much of the work has been accomplished already |
| position | This attribute returns the current position of the <progress> element |
| labels | This attribute returns a list of <progress> element labels (if any) |
Progress
The <progress> element is new in HTML5 and is used to represent the progress of a task
<progress value="22" max="100"></progress>
This creates a bar filled 22%
Chrome / Safari / Opera
These browsers use the –webkit-appearance selector to style the progress tag. To override this, we can reset the
appearance.
progress[value] {
-webkit-appearance: none;
appearance: none;
}
Now, we can style the container itself
progress[value]::-webkit-progress-bar {
background-color: "green";
}
Firefox
Firefox styles the progress bar a little differently. We have to use these styles
progress[value] {
-moz-appearance: none;
appearance: none;
border: none; /* Firefox also renders a border */
}
Internet Explorer
Internet Explorer 10+ supports the progress element. However, it does not support the background-color
property. You’ll need to use the color property instead.
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none; /* Remove border from Firefox */
width: 250px;
height: 20px;
color: blue;
}
HTML Fallback
For browsers that do not support the progress element, you can use this as a workaround.
<progress max="100" value="20"> <div class="progress-bar"> <span style="width: 20%;">Progress: 20%</span> </div> </progress>
Browsers that support the progress tag will ignore the div nested inside. Legacy browsers which cannot identify the
progress tag will render the div instead.
