Skip to content

Instantly share code, notes, and snippets.

@gene9

gene9/dabblet.css

Forked from genee19/dabblet.css
Created June 6, 2019 18:20
Show Gist options
  • Save gene9/b06d604daf89d67d907096a7935395ee to your computer and use it in GitHub Desktop.
Save gene9/b06d604daf89d67d907096a7935395ee 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%,60%,0) 8px, hsla(0,0%,60%,0) 15px) 0 0;
background-size:16px 100%;
background-color: #F7F7F7;
animation: move 1.9s 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