Skip to content

Instantly share code, notes, and snippets.

@k1r8r0wn
Last active November 7, 2015 09:52
Show Gist options
  • Save k1r8r0wn/cbcc3b78a09832e5d934 to your computer and use it in GitHub Desktop.
Save k1r8r0wn/cbcc3b78a09832e5d934 to your computer and use it in GitHub Desktop.
Loading dots
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
.loading-dots {
max-width: 150px;
margin: auto;
padding: 15px 0;
text-align: center;
}
.loading-dots span {
background: rgba(0, 148, 217, .2);
border-radius: 50%;
display: inline-block;
margin: 0 10px;
height: 10px;
width: 10px;
-webkit-animation: loading_dots 1s linear infinite;
-moz-animation: loading_dots 1s linear infinite;
-o-animation: loading_dots 1s linear infinite;
animation: loading_dots 1s linear infinite;
}
.loading-dots span:nth-child(2) {
-webkit-animation-delay: .25s;
-moz-animation-delay: .25s;
animation-delay: .25s;
}
.loading-dots span:nth-child(3) {
-webkit-animation-delay: .5s;
-moz-animation-delay: .5s;
animation-delay: .5s;
}
.loading-dots span:nth-child(4) {
-webkit-animation-delay: .75s;
-moz-animation-delay: .75s;
animation-delay: .75s;
}
@-o-keyframes loading_dots {
0%, 100% {
background: #0094d9;
}
75% {
background: rgba(0, 148, 217, .2);
}
}
@-moz-keyframes loading_dots {
0%, 100% {
background: #0094d9;
}
75% {
background: rgba(0, 148, 217, .2);
}
}
@-webkit-keyframes loading_dots {
0%, 100% {
background: #0094d9;
}
75% {
background: rgba(0, 148, 217, .2);
}
}
@keyframes loading_dots {
0%, 100% {
background: #0094d9;
}
75% {
background: rgba(0, 148, 217, .2);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment