How: create a kick-ass CSS3 progress bar

Position: relative; display: block;. Overflow: hidden; Height: 33px; -Moz-border-radius: 35px; -WebKit border-radius: 35px; Border-radius: 35px; -WebKit background size: 44px 44px; Background-color: # 74d04c; Background:-WebKit gradient (linear, 0 0, 44 44, color-stop (0.00, rgba(255,255,255,0.17)), color-stop (0.25, rgba(255,255,255,0.17)), color-stop (0.26, rgba(255,255,255,0)), color-stop (0.50, rgba(255,255,255,0)), color stop (0.51, rgba(255,255,255,0.17)), color stop (0.75, rgba(255,255,255,0.17)), color stop (0.76, rgba(255,255,255,0)), color-stop (1.00, rgba(255,255,255,0))), WebKit-gradient (linear, links below, links, up, color stop(0,_#74d04c), color stop(1,_#9bdd62));))))))))) Background:-moz repeated linear gradient fill (left - 30deg, rgba(255,255,255,0) 30px, rgba(255,255,255,0.17), rgba(255,255,255,0.17) 15px 15px rgba(255,255,255,0)),-moz linear gradient (# 9bdd62 0%, # 74d04c 100%); WebKit-box - shadow: offset 0px 0px 0px 1px # dbf383, offset 0px 1px 1px # 58c43a; - moz-box - shadow: offset 0px 0px 0px 1px # dbf383, offset 0px 1px 1px # 58c43a; Box-shadow: Offset 0px 0px 0px 1px # dbf383, offset 0px 1px 1px # 58c43a; Border: 1px solid # 4 c 8932; -WebKit-animation: animate strip 2 s linear infinity;

View the Original article