Create Quick and Easy Progress Bar Charts with HTML5 and CSS3

Aug 1, 2012
CSS HTML
By

The official January 2011 launch of the robust HTML5 has brought with it a number of powerful coding elements. Among them is the <progress> tag, a very useful tool in putting together quick, attractive online presentations.

CSS3 provides a highly flexible methodology for customizing default HTML5 tags. At present, both technologies are undergoing considerable revision. ‘Pseudo-elements’, such as those prefixed by -moz- and -webkit-, were implemented within the CSS3 framework to allow web developers the ability to create new and experimental features targeted toward specific browsers.

Mozilla Firefox corresponds to -moz, while Google Chrome and Apple’s Safari fall under the auspices of -webkit. These two pseudo-elements are the most widely used.

Progress Chart

Charts and bar graphs have long been utilized for instant viewer comprehension of raw data, as opposed to only showing the statistical figures.

Say, for instance, that you wanted to display an easily updated progress report pertaining to the completion status on a number of ongoing company projects. Plugging the relevant data into the <progress> tag is an easy way to do so.

HTML5 coding:

<body>
<strong>Project Completion Status</strong><br />
<br />
Project #1<br />
<progress id="bar" value="6" max="9">
<em>6 of 9 stages completed</em></progress>
<br />
Project #2<br />
<progress id="bar" value="20" max="100">
<em>20% complete</em></progress>
<br />
Project #3<br />
<progress id="bar" value="12" max="20">
<em>12/20 components completed</em></progress>
<br />
Project #4<br />
<progress id="bar" value="4" max="8">
<em>50% complete</em></progress>
<br />
Project #5<br />
<progress id="bar" value="9" max="10">
<em>9 out of 10 stages completed</em></progress>
</body>

As you can see, the data values can be input a number of ways – as a percentage or simply as a representation of the number of components, or stages, completed in a given project. In either case, the resulting bar value provides an effective visual status report.

The <progress>  element is fully supported in the following browser versions: Firefox (6.0+), Chrome (6.0+), Safari (5.2+), Opera (10.6+), and IE (10+).

It is very important to also include a ‘fallback’ option, in the event that a potential viewer is utilizing an unsupported browser. In this case, the fallback text states the actual percentages, or stages completed.

Rendering Issues

Default rendering issues engender varied online displays, depending on a viewer’s browser or operating system.

Naturally, it is best to ensure that the cross-browser presentation becomes a bit more consistent, in this case by exerting more control via customization. For an effective solution, we can call upon CSS3.

Coding:

/* Firefox - value portion of progress bar */
progress#bar::-moz-progress-bar {
background-color: red;
-moz-box-shadow: 1px 1px 1px #333333;
}

/* Chrome, Safari - value portion of progress bar */
progress#bar::-webkit-progress-value {
background-color: red;
-webkit-box-shadow: 1px 1px 1px #333333;
}

/* All other attributes */
progress#bar {
background-color: #F0F0F0;
border: solid #808080 2px;
border-radius: 5px;
-moz-box-shadow: 3px 3px 3px #C0C0C0;
-webkit-box-shadow: 3px 3px 3px #C0C0C0;
box-shadow: 3px 3px 3px #C0C0C0;
padding: 3px;
width: 250px;
height: 20px;
}

While the progress bars are not identical on the two noted browsers, their displays conform much more closely. At present, the color of the progress bar value is not adjustable in Opera.

However, with the recent news that Opera, along with Microsoft’s IE and possibly Firefox, might be joining the -webkit camp, any advances in the <progress> tag area would immediately have a widely distributed effect.

Customization

There are a considerable number of modifications that can be made to completely change the look of the above display. For example, by first changing the ID for each progress bar, you could use CSS3 to achieve different color schemes for all of them.

A box shadow has been applied to the outer borders, giving each progress bar unit a feeling of depth. A smaller shadow was also placed underneath the value portion of Firefox and the -webkit browsers.

As a result, previously ‘blah’ progress bars have much more oomph, and a greater degree of control has been exerted over such factors as height and width.

Conclusion

The objective of this article is to achieve the desired customization goals by utilizing only HTML5 and CSS3. Most currently available solutions involve either the <div> tag or a jQuery script.

As the pseudo-elements discussed herein become more standardized, cross-browser variations should continue to lessen. In time, more exotic features, such as integrating gradients into the progress bar, will likely be available without the use of psudo-elements, the <div> tag or JavaScript.

Author: David Elliot
David is a long-time journalist and editor, who also has over 10 years of experience as a freelance Web developer, specializing in online newspaper design and maintenance.
  • Todor Pavlov

    If there is no demo of the presented solution I cannot be sure if this article is worth reading ( and certainly not worth trying)

    • Sev_RC

      The same what I think. Furthermore it would be good to include pictures which show the progress.

    • Dave

      Demo files for all of the coding examples in the article were provided at the time of submission. I will follow up with Admin on how to disseminate them.

  • http://www.yourdigitalspace.com/ Swamykant

    Can you provide a demo page for this ?

  • http://www.fromdev.com/ Java Interview

    Yeah, robust HTML5 has come around with some useful coding elements. Basically I am a man of JavaScript but after watching the demo page I am quite impressed.