CSS3 Progress Bars
Dec 20, 2010
Just over a week ago I announced my CSS3 sticky note experiment and the response was amazing. A huge thanks to everyone that shared them! Today I have a new project to share — CSS progress bars.
The Process
One of my big goals was to use as little markup as possible — my target was just one element. Although it took some creativity, I was able to pull it off by making extensive use of CSS’s :before and :after psuedo selectors.
I started off with a <div> with a class of progress-bar as my base. I rounded the corners and gave it a partially transparent, black background. To this added a few subtle box-shadows to give it some depth.
Next, I set up a few global styles for my :before and :after selectors, setting the content: ''; and giving them the size and position I wanted. Then, to the :before selector I added my gradient. At this point, I had a fairly nice looking progress bar, but I still wanted to add the vertical striping. To do this, I used the :after pseudo selector and set the content as follows: content: '|||||||||||||||||';. After that, it was as easy as cranking up the font-size up to 120px, skewing it with a skewX transform, and messing with the letter-spacing until I got the spacing I wanted.
I’d like to shoot a big thank you to Martin Staněk and his CSS3 striped buttons experiment for showing me how to stripe the bars — they wouldn’t have looked nearly as good without them.
If you’ve got any questions, comments or complaints, tweet me @galengidman.