Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS3 spinner
/* 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;
}
<!-- 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>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.