The progress element

Attributes #

There are four attributes that are specified for the <progress> element: max, value, position, and labels. Before taking a look at each of theses attributes in turn, here are a few important notes on them:

• If the value attribute exists, then the progress bar is considered to be determinate (i.e., it has exact limits). Otherwise it is considered to be indeterminate.
• If the max attribute is not included, the default acceptable range for the progress bar is between 0.0 and 1.0 inclusive.
• Authors are encouraged always to include the current value and the maximum value (if used) as inline text to the <progress> element so that the information is still visible to users of legacy browsers.

And now let’s take a closer look at the attributes themselves:

Max

The max attribute is a floating point number that indicates how much work the relevant task requires in total before it can be considered complete. The default value is 1.0.

Value

This is a floating point number that represents the current progress of the relevant task. Its value must be greater than or equal to 0.0 and less than or equal to 1.0 or the value of the max attribute if present.

Position

This is a read-only attribute that returns the current position of the <progress> element. This value is equal to value / max for a determinate progress bar and -1 for an indeterminate progress bar (as the position can’t accurately be determined).

Labels

This is also a read-only attribute that returns a list of the <progress> element’s labels (if there are any).

Examples #

Let’s now take a look at some examples of how the <progress> element might be used, including how it might be updated via JavaScript.

<progress id='p'></progress>

<progress id='p' max='70'><span>0</span>%</progress>

var pBar = document.getElementById('p'); var updateProgress = function(value) {   pBar.value = value;   pBar.getElementsByTagName('span')[0].innerHTML = Math.floor((100 / 70) * value); }

<progress id='p' max='100' value='0'><span>0</span>% played</progress>

var video = document.getElementById('v'); var pBar = document.getElementById('p'); video.addEventListener('timeupdate', function() {   var percent = Math.floor((100 / video.duration) * video.currentTime);   pBar.value = percent;   pBar.getElementsByTagName('span')[0].innerHTML = percent; }, false);

var p = document.getElementById('p'); // 'reader' is of type FileReader reader.addEventListener('loadstart', function(evt) {   if (evt.lengthComputable) p.max = evt.total; }, false); reader.addEventListener('progress', function(evt) {   if (evt.lengthComputable) p.value = evt.loaded; }, false);

Browser Support #

The <progress> element is fairly well-supported in today’s major browsers, although only in version 6+ of Safari (so not on Windows, as the last version there was 5.1) and only in version 10+ of Internet Explorer.

Styling #

As is usual with such elements, browsers have their own unique styling for the <progress> element. You can, however, override this to a certain extent using simple CSS.

The default styling tends to consist of an element with rounded corners, a grey background colour, and a green gradient for the actual progress marker.

Let’s say we want to style our progress bar for the HTML5 Doctor website, so that it fits in with the design. We’ll remove the bevel and the gradients using only solid colours. The code below will almost do that:

progress {   color: #0063a6;   font-size: .6em;   line-height: 1.5em;   text-indent: .5em;   width: 15em;   height: 1.8em;   border: 1px solid #0063a6;   background: #fff; }

This, however, won’t change the colour of the progress bar itself, which will remain a green colour. We can change this in Firefox, Internet Explorer 10, Chrome, and Safari using a variety of methods which are outlined below.

Firefox #

All we need to use here is:

progress::-moz-progress-bar { background: #0063a6; }

and Firefox will display the colour correctly.

progress::-webkit-progress-bar { background: #fff; } progress::-webkit-progress-value { background: #0063a6; }

I’ve uploaded some working examples of determinate and indeterminate progress bars for you to see.

Summary #

The <progress> element may seem very similar to the <meter> element — which was also introduced in HTML5 — but it can be seen as a more specific kind of <meter> element that’s only used to measure progress of a task. It’s worth bearing this in mind when deciding which one to use.

Since browser support is pretty good, it’s definitely worth using the <progress> element where appropriate, but you should also ensure that you provide textual fallback for legacy browsers as has been outlined above.