Skip to content

Instantly share code, notes, and snippets.

@laukstein

laukstein/dabblet.css

Created February 9, 2012 11:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save laukstein/1779346 to your computer and use it in GitHub Desktop.
Save laukstein/1779346 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 spinner
Raw
dabblet.css
/* CSS3 spinner */
@keyframes rotate{
from{
transform:rotate(0deg) translate(-9px) rotate(0deg);
}
to{
transform:rotate(360deg) translate(-9px) rotate(-360deg);
}
}
.spinner{
position:relative;
top:10px;
left:10px;
display:inline-block;
width:6px;
height:6px;
background-color:#000;
border-radius:3px;
animation:rotate infinite linear;
animation-duration:.5s;
animation-delay:.1s;
}
.spinner + .spinner {
background-color:#666;
margin-left:-10px;
animation-delay:.2s;
}
.spinner + .spinner + .spinner {
background-color:#999;
animation-delay:.3s;
}
.spinner + .spinner + .spinner + .spinner {
background-color:#ccc;
animation-delay:.4s;
}
.spinner + .spinner + .spinner + .spinner + .spinner {
background-color:#f0f0f0;
animation-delay:.5s;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment