Chapter 26: Progress Element

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.