Skip to content

Instantly share code, notes, and snippets.

@philnash

philnash/dabblet.css

Created May 21, 2012 23:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save philnash/2765413 to your computer and use it in GitHub Desktop.
Save philnash/2765413 to your computer and use it in GitHub Desktop.
Download ZIP
CSS loading animation
Raw
dabblet.css
/**
* CSS loading animation
*/
@keyframes fade{
from {
opacity:1;
}
to {
opacity:0;
}
}
div.loader{
width:40px;
height:40px;
position:absolute;
top:50%;
left:50%;
}
div.loader div{
animation: fade 0.8s infinite;
height:20px;
width:10px;
background:#333;
border-radius:5px;
position:absolute;
}
div.loader div.loader1{
animation-delay:0;
transform:rotate(0deg) translate(0%, -100%);
}
div.loader div.loader2{
animation-delay:0.1s;
transform:rotate(45deg) translate(0%, -100%);
}
div.loader div.loader3{
animation-delay:0.2s;
transform:rotate(90deg) translate(0%, -100%);
}
div.loader div.loader4{
animation-delay:0.3s;
transform:rotate(135deg) translate(0%, -100%);
}
div.loader div.loader5{
animation-delay:0.4s;
transform:rotate(180deg) translate(0%, -100%);
}
div.loader div.loader6{
animation-delay:0.5s;
transform:rotate(225deg) translate(0%, -100%);
}
div.loader div.loader7{
animation-delay:0.6s;
transform:rotate(270deg) translate(0%, -100%);
}
div.loader div.loader8{
animation-delay:0.7s;
transform:rotate(315deg) translate(0%, -100%);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="loader">
<div class="loader1"></div>
<div class="loader2"></div>
<div class="loader3"></div>
<div class="loader4"></div>
<div class="loader5"></div>
<div class="loader6"></div>
<div class="loader7"></div>
<div class="loader8"></div>
</div>
Raw
settings.json
{"view":"split-vertical","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