CODEWITHSUNDEEP
css
Cydonia7
Cydonia7

Reputation: 3846

CSS3 - Progress bar design

I'm trying to give a nice style to the progress bars on my website (they're all using jQuery UI). I'd like it to look something like this : (there's a nice bevel effect and a nice progress indicator below)

Progress bar

I've tried to play a little with CSS3 to get something like this but I just can't find a good way to do it and what I tried is not really beautiful or even looking like the picture above...

Here's my try : http://jsfiddle.net/xw6zL/2/ ...

Any idea ?

Upvotes: 1

Views: 2381

Answers (2)

flying sheep
flying sheep

Reputation: 8962

i think that’s quite close: http://jsfiddle.net/xw6zL/4/

fiddle with it :)

the effect is achieved by adding two hard box-shadows below the upper and lower border of each element. look at its systax here.

Upvotes: 5

matt
matt

Reputation: 1025

Here is a link to some with a little more depth like your example:
http://www.red-team-design.com/stylish-css3-progress-bars
http://lab.galengidman.com/progress-bars/
http://sevenspark.com/free-stuff/css3-progress-bars

I think these are all pretty darn nice CSS3 bars. Each of these have tutorials and source code to help.

Upvotes: 2

Related Questions