Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ecwid's loading indicator in pure 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;
}
<!-- content to be placed inside <body>…</body> -->
<div id="load-indicator"/>
// alert('Hello world!');
{"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