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.