Progress bar on CSS3

Today we will recreate the progress bar from the Adobe Flash Player installer using CSS3 using gradients and shadows.



Under habrakatom all code and the link to a working example.

')
First, create a simple markup:

<div class="bar_wrap"> <div class="bar" style="width:76%"></div> </div> <div class="captions"> <div class="left">2324k / 3019k</div> <div class="right">76%</div> </div> 

Now let's write the styles:

 body { background: #4D4D4D; } .bar_wrap { border: 1px solid #1C1C1C; background-color: #313131; -webkit-box-shadow: 0 0 1px #666, inset 0 1px 1px #222; -moz-box-shadow: 0 0 1px #666, inset 0 1px 1px #222; -o-box-shadow: 0 0 1px #666, inset 0 1px 1px #222; box-shadow: 0 0 1px #666, inset 0 1px 1px #222; background-image: -webkit-linear-gradient(#323232, #2E2E2E 50%, #323232); background-image: -moz-linear-gradient(#323232, #2E2E2E 50%, #323232); background-image: -o-linear-gradient(#323232, #2E2E2E 50%, #323232); } .bar { height: 30px; max-width: 100%; background-color: #5387BA; border-right: 1px solid #282828; -webkit-box-shadow: inset 0 0 1px #ddd; -moz-box-shadow: inset 0 0 1px #ddd; -o-box-shadow: inset 0 0 1px #ddd; box-shadow: inset 0 0 1px #ddd; background-image: -webkit-linear-gradient(#66A3E2, #5387BA 50%, #4B79AF 51%, #385D87); background-image: -moz-linear-gradient(#66A3E2, #5387BA 50%, #4B79AF 51%, #385D87); background-image: -o-linear-gradient(#66A3E2, #5387BA 50%, #4B79AF 51%, #385D87); } .captions { color: #FDFDFD; padding: 5px 2px 0; font: 11px/14px sans-serif; text-shadow: 0 1px 0 #000; } .left { float: left; } .right { float: right; } 

As a result, we get:

Yes, this is not the screenshot from the beginning of the article, this is the result displayed in Firefox 7!
Also tested in Safari 5.1, Opera 11.52 and Chrome 15.

In old browsers it looks good too


A working example can be found here.

UPD: I added a hover animation to liven up the example a little.
About javascript animation is well written here , I do not want to repeat.