Skip to content

Instantly share code, notes, and snippets.

@daneden
Created January 24, 2012 11:36
Show Gist options
  • Save daneden/1669742 to your computer and use it in GitHub Desktop.
Save daneden/1669742 to your computer and use it in GitHub Desktop.
Light loader
/**
* Light loader
*/
* {
margin: 0;
padding: 0;
}
html {
min-height: 100%;
background: #444 linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.2));
}
.load:not([value]) {
border: 0;
position: absolute;
width: 100%;
height: 4px;
top: 50%;
margin-top: -4px;
box-shadow: 0 1px 0 rgba(100,100,100,.2);
background: rgba(0,0,0,.2) linear-gradient(0deg,hsla(200,100%,50%,0) 15%,
hsla(190,80%,70%,.4),
hsla(200,100%,50%,0) 85%) no-repeat;
background-size: 400px 8px;
display: block;
animation: m 2.5s infinite linear;
z-index: 999;
}
::-webkit-progress-bar {
display: none;
}
::-moz-progress-bar {
visibility: hidden;
}
@keyframes m {
0% { background-position: -100%; }
50%,100% { background-position: 200%; }
}
<progress class=load></progress>
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment