Skip to content

Instantly share code, notes, and snippets.

@qhwa

qhwa/dabblet.css

Created April 21, 2012 14:23
Show Gist options
  • Save qhwa/2437339 to your computer and use it in GitHub Desktop.
Save qhwa/2437339 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 progress bar
Raw
dabblet.css
/**
* 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);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="prog-bar">
<div class="bar" style="width:40%" />
</div>
Raw
settings.json
{"view":"split","fontsize":"140","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment