If you implement some web application, where the indication of the current progress would improve the UX, a nice little progress bar can help. And there is an easy way to add one. When in the past, we would have used something like jQuery UI Progressbar, we can use a native HTML element.

The progress HTML element

If you think of how to create an element to visualize some progress on a website and which attributes it has, you might think about something similar to the range input we had in a previous blog post, but the element is much simpler:

<label for="progress-bar">Progress:</label>
<progress id="progress-bar" value="30" max="100">30 %</progress>

This is how the native <progress> HTML element looks like in Chrome with the code from above:

As you can see, the element is inline. And do you recognize something? Even though this is not a form element, it is combined with a label. This enhances its accessibility. Adding the value as a text node inside, this text will not be visible in the browser if the element is supported. So this is only needed, if you are dealing with really older browsers not supporting the element, to show this inline text instead.

Advanced usage of the element

Have you recognized, that we have not set a min attribute in the example? This attribute is not available, because the min value always defaults to 0.

But did you know, that you can also not use the value attribute and what would happen then? It might blow your mind a bit, but this is what would happen:

That’s right! You would get an animating progress bar. No JavaScript, no CSS animation, just a <progress> element without a value. And to make it even more amazing, you can use it with some attributes for an accessible progress indicator for a different region of the site. Here is an example from the documentation page:

<div aria-busy="true" aria-describedby="progress-bar">
  <!-- content is for this region is loading -->
</div>

<!-- ... -->

<progress id="progress-bar" aria-label="Content loading…"></progress>

If you are in a WordPress project, you can use the ProgressBar component. In WordPress Core, it seems to only be used for a “loading animation” progress bar like above. It does use the <progress> element, but again with some custom HTML markup replacing the browser default visualization, so it has the same styling in all browsers.

Conclusion

A progress bar can really improve the UX for a web application. If you need one, why not go with the native one. You can also style it a bit. More on that could be found in the linked documentation pages. If you add a <progress> element, please do make sure to also have a label with it. Not only does it help users with assistive technology, but indicating that the progress stands for helps any user.