Skip to content

Instantly share code, notes, and snippets.

@nyamsprod

nyamsprod/dabblet.css

Created January 4, 2013 10:46
Show Gist options
  • Save nyamsprod/4451597 to your computer and use it in GitHub Desktop.
Save nyamsprod/4451597 to your computer and use it in GitHub Desktop.
Download ZIP
Gradient Progress bar
Raw
dabblet.css
/**
* Gradient Progress bar
*/
html, body { background-color:#fff; color:#222; text-align:center; }
[class^=loading-] { box-sizing:border-box; margin:1em auto; width:300px; height:20px; }
.loading-outer { overflow:hidden; border-radius:.3em; background-color:#f1f1f1; box-shadow:inset 0 0 2px rgba(128, 128, 128, .3); }
.loading-inner {
margin-top:0; margin-left:100%;
background-color:#0ebdf7;
background-image:linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%);
background-size:50px 50px;
animation:loading 3s ease-in-out infinite alternate;
}
@keyframes loading { to { margin-left:-100%; } }
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="loading-outer"><div class="loading-inner"></div></div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment