Skip to content

Instantly share code, notes, and snippets.

@grssam
Last active Dec 19, 2015
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 more">
</div>
/**
* Prefix-free loading animation,
* inspired by Metro and Windows 8
*/
/* Demo specific styles begin */
* {margin: 0; padding: 0;}
body {
background: #eee;
}
.loader {
margin-top: 10px;
}
/* Demo specific styles end */
/* Loader with three blocks */
.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, teal 0px, teal 10px, transparent 10px) no-repeat 0px 0px / 10px 10px;
content: ' ';
}
.loader {
animation-delay: .1s;
}
.loader:after {
animation-delay: .2s;
}
@keyframes loading-opacity {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes loading {
0% {
background-position: -50% 0px;
}
100% {
background-position: 150% 0px;
}
}
/* 2 more loading blocks */
.loader.more:before, .loader.more:after {
content: ' ■';
color: teal;
top: 0;
line-height: 6px;
font-size: 21px;
vertical-align: top;
animation: loading 4s cubic-bezier(.1,.85,.9,.15) infinite, loading-font 4s cubic-bezier(.1,.85,.9,.15) infinite !important;
}
.loader.more:before {
animation-delay: 0s,.2s !important;
}
.loader.more {
overflow: hidden;
opacity: 0;
animation: loading 4s cubic-bezier(.1,.85,.9,.15) infinite, loading-opacity 2s ease-in-out infinite alternate;
animation-delay: .6s,.4s !important;
}
.loader.more:after {
animation-delay: .4s,.8s !important;
}
@keyframes loading-font {
0% {
text-indent: calc(-50% - 5px);
}
100% {
text-indent: calc(150% - 10px);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment