Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created May 21, 2013 08:23
Show Gist options
  • Save anonymous/5618304 to your computer and use it in GitHub Desktop.
Save anonymous/5618304 to your computer and use it in GitHub Desktop.
Download ZIP
Ecwid's loading indicator in pure CSS
Raw
dabblet.css
/**
* Ecwid's loading indicator in pure CSS
*/
@keyframes move {
from { background-position-x: 0%; }
to { background-position-x: 100%; }
}
#load-indicator {
width: 208px;
height: 13px;
margin: 0 auto;
border-radius: 3px;
border: 1px solid #b1b1b1;
box-shadow: 0 2px 4px rgba(0,0,0,0.15) inset, 0 1px 7px rgba(0,0,0,0.05);
background:repeating-linear-gradient(110deg, hsl(0,0%,60%) 0px, hsl(0,0%,60%) 1px, hsl(0,0%,80%) 1px, hsl(0,0%,80%) 7px, hsl(0,0%,60%) 7px, hsl(0,0%,60%) 8px, hsla(0,0%,0%,0) 9px, hsla(0,0%,0%,0) 15px) 0 0;
background-size:16px 100%;
background-color: #F7F7F7;
animation: move 7s infinite linear;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="load-indicator"/>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment