Skip to content

Instantly share code, notes, and snippets.

@un1ko85
Forked from jankorbel/dabblet.css
Created May 26, 2016 09:00
Show Gist options
  • Save un1ko85/3da01d90bb0f6edb6166f6c18fcdaced to your computer and use it in GitHub Desktop.
Save un1ko85/3da01d90bb0f6edb6166f6c18fcdaced to your computer and use it in GitHub Desktop.
CSS animated loading dots
/*
CSS animated loading dots
*/
body
{
background: #5A5C64;
}
.loading_dots
{
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.3),
0 1px 0 rgba(255,255,255,0.3);
font-size: 1em; /* set size here */
line-height: 1;
padding: 0.125em 0 0.175em 0.55em;
width: 2.75em;
/*
position just for demo
*/
margin: 20% auto;
}
.loading_dots span
{
background: transparent;
border-radius: 50%;
box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
display: inline-block;
height: 0.6em;
width: 0.6em;
-webkit-animation: loading_dots 0.8s linear infinite;
-moz-animation: loading_dots 0.8s linear infinite;
-ms-animation: loading_dots 0.8s linear infinite;
animation: loading_dots 0.8s linear infinite;
}
.loading_dots span:nth-child(2)
{
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading_dots span:nth-child(1)
{
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
}
/*
Define the animation for every efing vendor prefix
*/
@-webkit-keyframes loading_dots
{
0% {
background: transparent;
}
50% {
background: #E4E4E4;
}
100% {
background: transparent;
}
}
@-moz-keyframes loading_dots
{
0% {
background: transparent;
}
50% {
background: #E4E4E4;
}
100% {
background: transparent;
}
}
@-ms-keyframes loading_dots
{
0% {
background: transparent;
}
50% {
background: #E4E4E4;
}
100% {
background: transparent;
}
}
@keyframes loading_dots
{
0% {
background: transparent;
}
50% {
background: #E4E4E4;
}
100% {
background: transparent;
}
}
<div class="loading_dots">
<span></span>
<span></span>
<span></span>
</div>
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment