January 25, 2014

Subscribe

Really Cool Glossy Progress/Result Bars in Pure CSS

The bars above were created purely with CSS (taking advantage of CSS3 properties such as linear-gradient and box-shadow), supported by all recent browsers versions except IE9 and below. Here is how, beginning with the HTML code.

This nestles some flat purple bars in the tracks. Note they are given a default width of 50%, but it is expected their true width is to be specified in the HTML (as in this example) or with javascript.

Now to make it pop, we’ll add three linear gradients to the bars. Remember that multiple CSS backgrounds stack top to bottom in the order you list them, so take care to have your most opaque backgrounds last. Our bottom background will be a solid left-to-right gradient from #5a377f (darker purple) to #a444b1 (lighter purple). On top of that will be a another gradient, this one creating a diagonal stripe effect that alternates between full transparency and a faint white that will lighten the underlying purple. On top of that will be one more gradient going from top to bottom to create the “shine” look.

Below is what the bars look like as each layer of background is added:

There is only one thing left to add, which is some box shadow on the bars to complete the look. Here I’ve used three shadows, the first two are top and bottom insets to give the bar more shine, while the third creates some shadow below and to the bar’s right.

Then let’s say we want to lose the purple and try some other colors. It’s as easy as swapping out the bottom gradient for something else. Below are the gradients #903 to #f91, #063 to #06f, and #69f to #f69. Looks pretty cool!

In fact you can make rainbow progress bars! And while we’re at it, you may want to make it so that the full spectrum is revealed only as the bar reaches full width. For that you need to define the width of the outer box in pixels rather than percent–let’s say 315px. Then change the background-size property on the inner bar to 100% 100%, 20px 20px, 315px 100%;. Here is the result:

Here is the full CSS for the purple bars all in one spot. Note that I haven’t included any browser prefixed properties (such as -webkit-linear-gradient), which you’ll probably want to do.