Using CSS3 to create an image-free progress bar

I've been playing a lot with advanced pseudo-classes and pseudo-elements for a project Aaron and I have been working on.

Originally, I was just going to share it as a blog post, but instead, Aaron and I hacked together as a generator you can use to make a purely CSS3 progress bar, like this:

progress bar

Here's how we did it.

You might also enjoy reading: