Clinical, strongly blue-hued photograph of basement stairway in Charles B. Wang Center of Stony Brook University, New York
Part of the Forms Reading List

Aimless browsing on the web is changing to a goal-directed activity: uploading a file, completing a form, working through a lesson plan, watching a . In response, we need a more complex web UI: not just signifiers for visited links, but ways of measuring progress.

HTML5 addresses that need with the <progress> element. Like all additions to HTML5, the <progress> element comes with supplementary CSS and JavaScript, which I’ll also cover in this article.

progress vs. meter

<progress> is often confused with the <meter> element, so it’s important to distinguish the two:

  • <progress> is used to display development over time of a specific task. The upper bound or limit of the task may be known (“determinate”) – proceeding through a set series of steps in an online exercise, or playing a music track of known length – or unknown (“indeterminate”) such as uploading a file to a server. The maximum value of <progress> may not be known before the element is displayed. For example, the number of steps needed to complete a form may change depending on the user’s answers, while the percentage of a file upload may change due to bandwidth, server activity, and other factors.
  • The conditions for <meter> are different in that its minimum and maximum values must be known beforehand. It would be fair to characterize <meter> as displaying a value that might fluctuate wildly (a volume meter for a music track, for example) between known minimum and maximum values.

Another example: if you were running a fundraising drive on a website, <progress> could be used to show collective donations towards a goal, whereas <meter> might display the number of online visitors to the donations page at any moment, to the maximum capacity of the server.

Another distinction: <progress> can have a minimum value of 0. The minimum value of a <meter> may be any floating-point number, including negative numbers: think of a temperature gauge, for example.

Using The Progress Tag

The <progress> element itself is pretty simple. It’s a standard closed tag: 

<progress></progress>

This creates an indeterminate element. Right now, since its value is unknown, <progress> will be animated in a “waiting” or “working” state in browsers that support it:

Adding a max value to the element sets an upper limit, but doesn’t change the animation: <progress max="100"></progress>

Adding a value sets the current state of progress: 

<progress value="10" max="100"></progress>

And changes the appearance of the element:

The progress bar is still animated in most browsers, although much more subtly; naturally, it can also be completely customized with CSS.

It should be noted that progress is inline (“phrasing”) content, and can be mixed in with other content: 

<p> We’ve made it to 50% of our funding goal! 
<span>$0</span>
<progress value="5012" max="10000" id="funding"></progress>
<span>$10,000</span>

It might be somewhat surprising to learn that you can’t use <label> with <progress> in valid HTML5, even though we might consider <progress> to be a form element. The fact is that the user will never need to interact with <progress>: it is a “reporting” element, not something that the user would ever need to enter information into, and therefore does not need a <label>.

However, the <output> element can be used with <progress> to show its value. A simple example: 

Progress towards our $10,000 pledge drive:
<progress min="0" max="10000" value="5012" id="funding" onchange="pledgeUpdate"></progress>
<output for="funding" id="totalDonations">0</output>

A script to update the total pledge amount and convert the value into a dollar amount with commas: 

var funding = document.getElementById('funding').value;
pledgeUpdate();

function numberWithCommas(x) {
	return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function pledgeUpdate() {
	document.getElementById('totalDonations').value = "$" + numberWithCommas(funding);
}

The result:

Progress towards our $10,000 pledge drive: 0

Of course, it’s easy to set the value of the <progress> element by writing to it directly: 

document.getElementById('funding').value = 555;

The appearance of the <progress> element is up to individual browser implementation, and leans heavily on the underlying operating system’s established UI theming; customizing the appearance of the progress bar to make it appear consistent is up to CSS.

Progressing In Style

The <progress> element appears at a default size on a web page, no matter what its maximum value. We can change this by setting an explicit width and height: 

progress {
	width: 500px;height: 12px; 
}

Firefox and IE obey both declarations, but you’ll find that Webkit/Blink, while it follows the width, ignores or responds oddly to height. To get the element to work predictably in Chrome, Safari and Opera we need to reset its appearance: 

progress {
	-webkit-appearance: none;
	width: 500px; height: 12px;
}

You’ll find that this removes all native OS styling on the element in Webkit: the progress bar turns green, and the background a dark grey. To get the equivalent in Firefox, we must take a similar approach: 

progress {
	-webkit-appearance: none; -moz-appearance: none; width: 500px; height: 12px; }

However, the result differs: the progress bar will appear blue in Firefox, for example. To make things perfectly consistent, we have to dig a little deeper into the CSS: 

progress {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 500px;
	height: 12px;
	background-color: #888;
	border: none;
	color: green;
}
progress::-webkit-progress-bar,
	progress::-moz-progress-bar,
	progress::progress-bar {
		background-color: green;
}
progress::-moz-progress-bar {
	background-color: green;
}

The result:

You’ll note some deliberate repetition in the CSS above, due to the fact that browsers exhibit eccentricities in HTML5 CSS pseudo-element selectors. For example, Firefox will completely ignore ::-moz-progress-bar if it is grouped with any other selector. For this reason, I strongly suggest you use the selector order shown above when attempting to customize HTML5 progress bars.

Going Vertical

Like range elements, progress elements may be oriented vertically: think of the “thermometers” displayed beside heritage buildings to track donations towards a restoration project. The most consistent way I know to achieve this is to use a CSS transform. Note that it is particularly important to use a box-sizing: border-box CSS reset in this case, otherwise Mozilla and Webkit will size and shape the <progress> element differently: 

* {
	box-sizing: border-box;
}
progress {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff;
	width: 300px;
	height: 20px;
	border-radius: 10px;
	border: 5px double #aaa;
	display: block;
	-webkit-transform-origin: center left;
	-webkit-transform: rotate(-90deg) translateX(-100%);
	transform-origin: center left;
	transform: rotate(-90deg) translateX(-100%);
	margin-left: 1%;
}

This could be customized further: 

progress::-webkit-progress-bar {
	background: #fff;
}
progress::-webkit-progress-value {
	border-radius: 6px;
	background: linear-gradient(90deg, #000,#f00);
}
progress::-ms-fill {
	border-radius: 6px;
	background: linear-gradient(90deg, #000,#f00);
}
progress::-moz-progress-bar {
	border-radius: 6px;
	background: linear-gradient(90deg, #000,#f00);
}

The result can be seen below:

We gain several insights from this experiment:

  • Firefox uses background to style the background color of <progress> element; Webkit uses ::webkit-progress-bar, and IE uses ::-ms-fill
  • The active measuring portion of the progress bar is referred to as ::-moz-progress-bar in Firefox, and webkit-progress-value in Webkit. In IE10, the bar’s color can only be affected by the color property.

Conclusion

<progress> is a very useful element, although it lacks utility without a means to constantly update its value. I’ll look at that, and various uses of the <progress> element, in future articles.

Photograph by Ming Gullo, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.