jcanfield
4/21/2012 - 2:23 PM

CSS3 progress bar

CSS3 progress bar

settings.json
content_copyfile_download
{"view":"split","fontsize":"140","seethrough":"","prefixfree":"1","page":"css"}
dabblet.html
content_copyfile_download
<!-- content to be placed inside <body>…</body> -->
<div class="prog-bar">
	<div class="bar" style="width:40%" />
</div>
dabblet.css
content_copyfile_download
/**
 * CSS3 progress bar
 * desgin: http://dribbble.com/shots/522214-Progress-Bar
 */
body {
	background-image: repeating-linear-gradient(0, #3C3540 0, #3C3540 50%, #38313B 50%, #38313B 100%);
	background-size: 3px 1px;
}

.prog-bar {
	width: 300px;
	height: 13px;
	background: rgba(0,0,0,.4);
	margin: 5em auto;
	border-radius: 10px;
	box-shadow: inset 0 2px 0px rgba(0,0,0,.3),                 
		    inset 0px -1px 0px rgba(255,255,255,.2);
}

.prog-bar .bar {
	position:relative;
	height: 100%;
	border-radius: 10px;
	background: linear-gradient(0, #D36A8D, #6797C0);
	box-shadow: inset 1px 3px 10px rgba(255,255,255,.3);
}

.prog-bar .bar:after {
	content: "";
	position: absolute;
	top: 3px;
	right: 6px;
	width: 7px;
	height: 7px;
	border-radius: 14px;
	background: #3E75AB;
	box-shadow: inset 0 2px 0px rgba(0,0,0,.3),                 
		    inset 0px -2px 0px rgba(255,255,255,.4);
}