Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created May 7, 2013 04:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/5530284 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/5530284 to your computer and use it in GitHub Desktop.
Download ZIP
Metro-like loading animation with CSS3
Raw
dabblet.css
/** Metro-like loading animation with CSS3
*/
* {margin: 0; padding: 0;}
body {
background: #eee;
}
.loader {
margin: 50px auto;
text-align: center;
position: relative;
width: 60%;
}
.loader span {
background: #222;
border-radius: 5px;
display: inline-block;
position: relative;
width: 10px;
height: 10px;
position: absolute;
}
.loader .dot_1 {
margin-right: 10px;
animation: loading 4s ease-in-out infinite;
}
.loader .dot_2 {
animation: loading 4s ease-in-out .3s infinite;
}
.loader .dot_3 {
animation: loading 4s ease-in-out .6s infinite;
}
@keyframes loading {
from {
margin-left: 50%;
opacity: 0;
}
50% {
margin-left: 0;
opacity: 1;
}
to {
margin-left: -50%;
opacity: 0;
}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="loader">
<span class="dot_1"></span>
<span class="dot_2"></span>
<span class="dot_3"></span>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment