posted on:March 27, 2008
Pure CSS Animated Progress Bar
Here’s a simple demonstration of how you can create animated progress bar using pure css. The trick is very simple. We need 3 elements, one container and 2 nested elements.
We’ll put a cool background image in the container and define fixed width and height. First child (SPAN) will act as a progress bar. We’ll absolutely position second child (EM) above the progress bar and shift it to the left to a desired value. EM has the same background as the container so it gives an effect of progress bar stopping at certain percentage.
To keep it as meaningful as possible I used definition list (DL) to list for several values. For single progress bar you can use any element you want. I love paragraphs so I used P in my example.
<dd> <span><em style="left:100px">50%</em></span> </dd>
I decided to use inline styles for left EM placement. It is more convenient to write both values at the same place at once.
How is it done? Using animated gif of course. Remember those? SPAN has a 200px wide background gif that animates from "zero" to 200px. No matter what percentage we use it goes all the way and stops. Effect of stopping at certain percentage is done with EM as I mentioned earlier.
In my example I use 200 pixels wide progress bar. EM element is also 200px wide. So each percentage is 2px wide. If we want to accurately shift the EM we need to multiply percentages with 2.
i.e. 50% will mean 100px left offset, 24% will mean 48px offset, 75% – 150px etc. You get the picture.
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Comments (55 Comments)
Sorry, the comment form is closed at this time.