Create a nice CSS3 Progress bar without any images | Brighten up by Css series

by in , , 0

As I’ve shown you in some of my recent posts, the new features introduced in CSS3 allows developers to create stunning visual effects. Today, let’s create a fancy progress bar using CSS3 and jQuery, but no Flash or even images.

Please note: The original CSS3 progress bar shown in this tutorial has been created by Ivan Vanderbyl, which hereby gave me the right to reproduce and document his work.
The following tutorial and the demo works best on Chrome and Safari, correctly on Firefox and very badly in Internet Explorer (eh…I’m sure you hadn’t guessed that).

The Demo




Getting ready

Let’s start by organizing our work. To achieve the effect of this tutorial, we’ll need to create 3 files:
  • progress.html, which will contain our markup.
  • ui.css which will contain our CSS styles.
  • progress.js which will contain some additional jQuery animations.

Create a directory on your webserver (or hard drive) and create the files.
Download code

Leave a Reply