Table of contents:
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
progresselement requires. The
maxattribute, if present, must have a value greater than
0and be a valid floating point number. The default value is
VALUE attribute specifies how much of the task that has been completed. It must be a valid floating point number between
max, or between
maxis omitted. If there is no
valueattribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.
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 (
maxattribute) if they are specified. If unspecified or malformed, the value is
0. If specified, but not within the range given by the
maxattribute, 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 (
maxattribute), if specified. If unspecified, the minimum value is
MAX: The upper numeric bound of the measured range. This must be greater than the minimum value (
minattribute), if specified. If unspecified, the maximum value is
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 🤪