Create Quick and Easy Progress Bar Charts with HTML5 and CSS3

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.

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.

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

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.

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.

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.
More articles by David Elliot

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.

Hey WordPress lovers. Every month dozens of incredible free WordPress plugins are released by the community, and we’re here to bring them to you. This seems to be a month of small but useful utilities that only do one or two things, with a few exceptions. So go on. March on down to the list, and get to it! (I'm only a little bit ashamed of that pun.) WP NoteUp ... Notes! Alongside your posts and pages! Use them to remind yourself, or other authors, about things you'd put in a note. That's really all there is to...

WordPress plugins are coming out all of the time, right and left. Every day, they’ve got new ones in the WordPress plugin repository for the curious developer to check out. Over time, your average designer or developer will end up with a list of their favorites. Usually, they’re plugins that solve common problems, are up-to-date and well-maintained, with good support. With that in mind, we’re sharing a list of some of the best plugins out there. Disable Comments ... Disable Comments does......

When I first started out creating websites with WordPress, I was in awe of the depth and variety of plugins available. During those golden days I would willingly install just about anything that looked cool. Shortly thereafter, I was smacked in the head by reality. Stuff started breaking and seriously hurt my good time. It turns out that not every plugin is a great one. And there are times when it seems like the work we do is held together with bubble gum and duct tape. Everything works splendidly until it...

WordPress is undoubtedly one of the most popular tools on the Internet because it makes it so easy to get a functional web site up and running in such a short time. And then there are the plugins. If you want your WordPress site to do something then odds are there is a plugin that you can install to make your site do what you want it to do. But plugins pose a bit of a problem at times. Since they are created by third-party developers you never know what quality control practices are used and what security testing...

WordPress beginners have difficulty customizing their websites past simple text changes, especially if they have no background knowledge of HTML or CSS. WordPress page builder plugins allow just about anyone to build a stylish or professional looking web page, through a user-friendly interface - quickly, and without knowing HTML or CSS. Though it may seem like WordPress page builder plugins have usefulness mainly for the technically unsavvy, they can also make a WordPress developer’s job...

Oftentimes, setting up a WordPress website results in a haphazard scramble to configure enough of the right plugins to make the client happy, and address any specific needs they might have mentioned. But a failure to install certain plugins means the client will come back at you with questions as to why it wasn’t done in the first place. Though you’re probably happy to rectify the problem (and collect a little extra money on the project), going back in to install plugins can distract from more profitable...

In Part 1 of this series we took a look at how you can better secure your WordPress files during, and after, the installation of the software. But once you have the files hardened against different threats, it is time to start looking at some of the different plug-ins available that can help you further protect and secure your WordPress site. WordPress Firewall 2 ... Having worked with a company that deals with web application firewalls, I can tell you from firsthand experience that these are by far one...

There’s a goal behind every website, and a specific chain of events that must occur before each goal is accomplished. Whether you want someone to sign up for your email newsletter, or fill out a contact form, these things don’t happen without the proper triggers. Used strategically, WordPress plugins can assist with the realization of important goals. Here’s how to turn your website into a conversion machine with WordPress Plugins. Essential Grid ... Essential Grid is an all-around grid solution...

About

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.