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.
Take a look at the demo
| Download zip file
The Concept
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.
Markup
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><br /> <span><em style="left:100px">50%</em></span><br /></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.
Animation
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.
EM placement
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. :)
by: Alen Grakalic
