How to make a progress bar without JavaScript

As we’re going trough fun new things HTML can do, we might come across progress bars which you can make without using JavaScript. In this exercise we’ll go trough everything you’ll need to create one of your own, and don’t worry, it’s super simple 😊

Table of contents:

• What are progress bars
• HTML progress Tag
• HTML meter Tag

Let’s get started: What are progress bars?

These are used to mark progress, for example when you’re downloading something or are going trough a questionnaire and it’s showing you how far you’ve got.. They look something like this:

We’ll go trough two ways of making them but we’ll keep our styling to the basics 🤪

Let’s get onto it with our first example:

HTML <progress> Tag

This tag might look new!
It represents the completion progress of a task and it goes nicely with a <label> tag for best accessibility practices so keep that in mind 😊

How do we use it?

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

In the example above we’ve set the ‘max’ and ‘value’ attributes to some numbers and we might wonder what these mean:

MAX attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.

VALUE attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

Please note:
Unlike the <meter> element, the minimum value is always 0, and the min attribute is not allowed for the <progress> element.

HTML <meter> Tag

Another option you could look at would be <meter> element which has a little bit more to offer in terms of attributes it comes with so let’s have a look at them:

<label for='download-one'> Download 1: </label>
<meter id='download-one' value='2' min='0' max='10'> 2 our of 10 </meter>

<label for='download-two'> Download 2: </label>
<meter id='download-two' value='0.6'> 60% </meter>

The <meter> element represents a value within a known range (example called ‘Download 1’) or a fractional value (example called ‘Download 2’). Let’s go trough the attributes used and explain what they are:

VALUE: The current numeric value. This must be between the minimum and maximum values (min attribute and max attribute) if they are specified. If unspecified or malformed, the value is 0. If specified, but not within the range given by the min attribute and max attribute, the value is equal to the nearest end of the range.

MIN: The lower numeric bound of the measured range. This must be less than the maximum value (max attribute), if specified. If unspecified, the minimum value is 0.

MAX: The upper numeric bound of the measured range. This must be greater than the minimum value (min attribute), if specified. If unspecified, the maximum value is 1.

There are a couple of other attributes you could find used with <meter> element and those would be ‘high’, ‘low’, ‘optimum’ and ‘form’ which you can find more about on MDN Web Docs.

Both of our examples are pretty easy to style but beware, they might not work everywhere
– looking at you IE 🤪