progress HTML element
progress HTML element was introduced in HTML5 and is used to represents the completion progress of a task. Typically it is displayed as a progress bar but this can be overridden so is up to the web developer.
Developers should make sure it is associated with a
label element, especially when the label is not immediately preceding it. To support older browsers that don’t support the
progress element, a textual description of the progress can be included within the element.
At the time of writing this article, support is pretty good for desktop with the exception of requiring at least IE10, mobile support isn’t fantastic though.
Determinate vs indeterminate
Two types of progress bars can be used: determinate, where a completion percentage can be reported; or indeterminate, where progress is being made but the completion percentage is unknown.
A progress bar is determinate when the
value attribute is set. The
position helper attribute returns the completion percentage of the progress bar (ie.
value / max).
A progress bar is indeterminate when no
value attribute is specified, it can also be explicitly defined by specifying
value="-1". Note that the
position attribute will return
-1 for an indeterminate progress bar.
progress element should not be used to represent a gauge, such as disk usage or a test score. The
meter element should be used in this case. The
progress element differs from the
meter element in that it is only used to represent the progress of a task.
Determinate progress bar
<progress value="0" max="100">0%</progress>
Indeterminate progress bar
CSS-Tricks has a great article by Pankaj Parashar on some advanced styling of the
progress element. Unfortunately, currently styling is different for different browsers.
You target determinate progress bars using
progress[value] and indeterminate ones with
progress:not([value]), then use browser-specific pseudo-elements (which can be viewed in the shadow DOM) to style the different parts.
See the Pen The <progress> element #1 by Daniel Imms (@Tyriar) on CodePen
Here is a more advanced example of progress bar displayed as a pie chart for WebKit-based browsers. Unfortunatley
transform:rotate(attr(value deg)); doesn’t work yet so it will be difficult to use this for a progress bar that isn’t static.
See the Pen The <progress> element #2 by Daniel Imms (@Tyriar) on CodePen
Read more on the
progress element from the following sources: