Skip to content

Instantly share code, notes, and snippets.

@grssam
Created Jul 3, 2013
Embed
What would you like to do?
A CodePen by Girish Sharma. Metro-like loading animation with CSS3 - Prefix-free loading animation, inspired by Metro and Windows 8
<div class="loader">
</div>
/**
* Prefix-free loading animation,
* inspired by Metro and Windows 8
*/
* {margin: 0; padding: 0;}
body {
background: #eee;
}
.loader {
margin-top: 10px;
}
.loader, .loader:before, .loader:after {
display: inline-block;
width: 100%;
height: 10px;
position: absolute;
animation: loading 4s cubic-bezier(.1,.85,.9,.15) infinite, loading-opacity 2s ease-in-out infinite alternate;
background: linear-gradient(to right, black 0px, black 10px, transparent 10px) no-repeat 0px 0px / 10px 10px;
content: ' ';
}
.loader {
animation-delay: .1s;
}
.loader:after {
animation-delay: .2s;
}
@keyframes loading-opacity {
from {
opacity: 0;
}
40% {
opacity: 1;
}
}
@keyframes loading {
0% {
background-position: -50% 0px;
}
100% {
background-position: 150% 0px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment