Chapter 26: Progress Element

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.