Pure CSS3 Progress bars. No JavaScript or Image used.

dabblet.css

/**
 * Pure CSS3 Progress bars. No JavaScript or Image used.
 * @author: Bhargav Vadher
 * @date: 2012-10-31 the Halloween day :) 
 */

body{ 
	background-color: rgba(0,0,0,1); 
	font-family: sans-serif;
} 
div.container{
 	position: relative;
 	padding: 40px;
 	border: 1px solid white;
 	height: 100%;
 	color: white;
} 
div.bars > div.set > div{
 	position: relative;
 	height: 20px;
	width: 70%;
	margin: 30px 0px 0px 10px;
	display: block;
	padding: 3px 5px;
	border-radius:5px;
	background-color: rgba(255,255,255,.1);
	box-shadow: inset 0px 0px 5px 0px rgba(255,255,255,.2);
}
div.bars:before{
	content: attr(data-title);
	font-size: 1.5em;
	text-align: center;
}
div.bars > div.set{
	border: 1px solid #333;
	margin: 50px 0;
	padding-bottom: 30px;
}
div.bars > div.set > div > span:after{
	content: attr(class);
	position: relative;
	top: -20px;
	font-size: 11px;
	text-transform: capitalize;
} 
div.bars > div.set > div span.bar{
 	position: relative; 
 	height: 20px;
	display: inherit;
 	border-radius: 5px;
	background-size: 70px 70px;
	box-shadow: inset 0px 0px 10px 2px rgba(255,255,255,.5);
}
div.set > div > span.stripped.bar{
	background-image: linear-gradient(
		45deg, 
		transparent 25%, 
		rgba(255,255,255,.3), 
		rgba(255,255,255,.3) 50%, 
		transparent 50%, 
		transparent 75%, 
		rgba(255,255,255,.3) 75%
	);
}
div.set > div > span.stripped.animated{
	animation: animateBar 3s linear infinite;
}
div.set > div > span.stripped.reversed.animated{
	animation: animateBar 3s linear infinite alternate;
}
span.orange{
 	width: 80%;
 	background-color: #BD711A;
}
span.pink{ 
	width: 60%; 
 	background-color: #CC3399;
}
span.maroon{ 
 	width: 40%;
 	background-color: maroon;
}

@keyframes animateBar{
	from { background-position: 0 0; }
	to { background-position: 70px 0%; }
}

dabblet.html

<div class='container'>
	<div class='bars' data-title='Awesome progress bars using CSS3'>
		<!-- uni-color bars -->
		<div class='set'>		
			<div><span class='simple bar'></span></div>
			<div><span class='simple orange bar'></span></div>
			<div><span class='simple pink bar'></span></div>
			<div><span class='simple maroon bar'></span></div>
		</div>
		<!-- stripped bars -->
		<div class='set'>
			<div><span class='stripped bar'></span></div>		
			<div><span class='stripped orange bar'></span></div>
			<div><span class='stripped pink bar'></span></div>
			<div><span class='stripped maroon bar'></span></div>
		</div>
		<!-- stripped animated bars -->		
		<div class='set'>
			<div><span class='stripped animated bar'></span></div>		
			<div><span class='stripped animated orange bar'></span></div>
			<div><span class='stripped animated pink bar'></span></div>
			<div><span class='stripped animated maroon bar'></span></div>
		</div>
		<!-- stripped reversed animated bars -->				
		<div class='set'>
			<div><span class='stripped reversed animated bar'></span></div>		
			<div><span class='stripped reversed animated orange bar'></span></div>
			<div><span class='stripped reversed animated pink bar'></span></div>
			<div><span class='stripped reversed animated maroon bar'></span></div>
		</div>
	</div>
</div>

settings.json

{"view":"separate","fontsize":"60","seethrough":"","prefixfree":"1","page":"all"}