I've been working on a variety of project that focus around the concept of timed-events and a countdown system, so I need a nice way to present the time left - what better than a progress bar!

The concept of using progress bars on website has been around for years however CSS2 was very restrictive in the style that we could actually use. For example, we'd have a container with 100% width that had the border, inside of this was our increasing bar (which is how it is done in CSS3) however there was no radius, there were no nice gradients, unless of course you wanted to use a background image and consequently needed a left and right rounded end nib. As you can probably tell, it was quite an effort to make a progress bar that actually looked good!

Now, thanks to CSS3 we're able to have gradients, glows, different visual styles through shadows, strokes, etc. taking advantage of the HTML5 canvas element. I was trying to find a progress bar that had a gradient with gloss, here are some that I found.

Stylish CSS3 progress bars

Provided by Catalin Rosu explains how to create a stylish and animated progress bar through CSS3 itself. The article outlines the fall-back methods for older browsers (though now-a-days, this isn't such an issue)

Stylish CSS3 progress bar - ALJT Media

Animated dark CSS3 progress bars

Provided by Kushagra Agarwal take a different approach to animating their progress bars by using a new CSS3 animation of pulse to produce a glowing progress bar. The animation is only supported in Chrome, Firefox, Safari and IE 10 otherwise the rest won't be animated.

Animated dark CSS3 progress bars - Web Design

Pure CSS3 progress bar

Provided by Codepen gives a sleek animated progress bar which a repeating stylish background. It combines the techniques mentioned above into one simple approach and uses the canvas to animate the progress! The CSS explains how to use keyframes in webkit and other browsers (please see the links above for further details).

Pure CSS3 progress bars - Web Design Liverpool

Light CSS3 Loadng Progress Bars

Provided by Media Loot provides a variety of gradients, styles and sizes that are easy to implement and come with a variety of colours to choose from.

Light CSS3 progress bar - Web Design Liverpool

Make your Instagram beautiful. Preview your images before you post them ›