Basic

View Source
<!-- HTML -->
<div class="bar color0">
	<span></span>
</div>

<!-- CSS --> .bar { margin: 5px 0 3px; border: 6px solid #333; background: #333; overflow: hidden; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; box-shadow: 1px 1px 1px #777; -moz-box-shadow: 1px 1px 1px #777; -webkit-box-shadow: 1px 1px 1px #777; } .bar > span { display: block; height: 20px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .color0 > span { background-color: #FF9932; }

Gradient

View Source
<!-- HTML -->
<div class="bar gradient color1">
	<span></span>
</div>

<!-- CSS --> .gradient > span { box-shadow: 0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset; -moz-box-shadow: 0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset; -webkit-box-shadow: 0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#33000000', GradientType=0 ); } .color1 > span { background-color: #90EE90; }

Gloss

View Source
<!-- HTML -->
<div class="bar gradient gloss color2">
	<span></span>
</div>

<!-- CSS --> .gloss > span { background-image: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(45%,rgba(255,255,255,0.1)), color-stop(55%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1) 100%); } .color2 > span { background-color: #dbf043; }

Stripe

View Source
<!-- HTML -->
<div class="bar gradient stripe color3">
	<span></span>
</div>

<!-- CSS --> .stripe > span { background-size:30px 30px; -moz-background-size:30px 30px; -webkit-background-size:30px 30px; -o-background-size:30px 30px; background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(25%,rgba(255,255,255,0.2)), color-stop(25%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.2)), color-stop(75%,rgba(255,255,255,0.2)), color-stop(75%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(-45deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); background-image: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); } .color3 > span { background-color: #4169E1; }

Animated Stripe

View Source
<!-- HTML -->
<div class="bar gradient stripe color4">
	<span class="animate"></span>
</div>

<!-- CSS --> .color4 > span { background-color: #4169E1; } .animate { animation: progress 2s linear infinite; -moz-animation: progress 2s linear infinite; -webkit-animation: progress 2s linear infinite; -ms-animation: progress 2s linear infinite; -o-animation: progress 2s linear infinite; } @-webkit-keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } } @-moz-keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } } @-ms-keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } } @-o-keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } } @keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } }

3D Rotate (Look-alike)

View Source
<!-- HTML -->
<div class="bar gradient stripe color6">
	<span></span>
</div>

<!-- CSS --> .pattern2 > span { background-size: 10px 60px; background-position: 0; background-image: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,.9) 0%, rgba(255,255,255,.2) 20%, transparent 40%); background-image: -webkit-gradient( radial, center center, 0, center center, 60, color-stop(0, rgba(255,255,255,.9)), color-stop(20%, rgba(255,255,255,.2)), color-stop(40%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0))); background-image: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,.9) 0%, rgba(255,255,255,.2) 20%, transparent 40%); background-image: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,.9) 0%, rgba(255,255,255,.2) 20%, transparent 40%); background-image: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,.9) 0%, rgba(255,255,255,.2) 20%, transparent 40%); background-image: radial-gradient(ellipse at center, rgba(255,255,255,.9) 0%, rgba(255,255,255,.2) 20%, transparent 40%); } .color5 > span { background-color: #4169E1; }

Stunning

View Source
<!-- HTML -->
<div class="bar gradient pattern color6">
	<span>
		<span class="animate"></span>
	</span>	
</div>

<!-- CSS --> .pattern > span { background-size: 13px, 29px, 37px, 53px; background-image: -moz-linear-gradient(left, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.07) 50%, transparent 50%), -moz-linear-gradient(left, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.13) 50%, transparent 50%), -moz-linear-gradient(left, transparent 0%, transparent 50%, rgba(255,255,255,0.17) 50%), -moz-linear-gradient(left, transparent 0%, transparent 50%, rgba(255,255,255,0.19) 50%); background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.07) 50%, transparent 50%), -webkit-linear-gradient(left, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.13) 50%, transparent 50%), -webkit-linear-gradient(left, transparent 0%, transparent 50%, rgba(255,255,255,0.17) 50%), -webkit-linear-gradient(left, transparent 0%, transparent 50%, rgba(255,255,255,0.19) 50%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,.07)), color-stop(50%,rgba(255,255,255,.07)), color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0))), -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,.13)), color-stop(50%,rgba(255,255,255,.13)), color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0))), -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.17)), color-stop(50%,rgba(255,255,255,0.17))), -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.19)), color-stop(50%,rgba(255,255,255,0.19))); background-image: -o-linear-gradient(left, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.07) 50%, transparent 50%), -o-linear-gradient(left, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.13) 50%, transparent 50%), -o-linear-gradient(left, transparent 0%, transparent 50%, rgba(255,255,255,0.17) 50%), -o-linear-gradient(left, transparent 0%, transparent 50%, rgba(255,255,255,0.19) 50%); background-image: -ms-linear-gradient(left, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.07) 50%, transparent 50%), -ms-linear-gradient(left, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.13) 50%, transparent 50%), -ms-linear-gradient(left, transparent 0%, transparent 50%, rgba(255,255,255,0.17) 50%), -ms-linear-gradient(left, transparent 0%, transparent 50%, rgba(255,255,255,0.19) 50%); background-image: linear-gradient(to right, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.07) 50%, transparent 50%), linear-gradient(to right, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.13) 50%, transparent 50%), linear-gradient(to right, transparent 0%, transparent 50%, rgba(255,255,255,0.17) 50%), linear-gradient(to right, transparent 0%, transparent 50%, rgba(255,255,255,0.19) 50%); } .pattern > span > span { display:block; height:100%; width:100%; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background-size: 12px; background-image: -moz-linear-gradient(left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 50%, transparent 50%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.1)), color-stop(50%,rgba(255,255,255,0.1)), color-stop(50%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 50%, transparent 50%); background-image: -o-linear-gradient(left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 50%, transparent 50%); background-image: -ms-linear-gradient(left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 50%, transparent 50%); background-image: linear-gradient(to right, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 50%, transparent 50%); } .color6 > span { background-color: #026873; }

* Refresh the page to change the width of progress bars.