Skip to content

Instantly share code, notes, and snippets.

@xspirkovska

xspirkovska/LoadingEllipsis.markdown

Last active August 29, 2015 14:17
Show Gist options
  • Save xspirkovska/d5271cad3a85f0b784b0 to your computer and use it in GitHub Desktop.
Save xspirkovska/d5271cad3a85f0b784b0 to your computer and use it in GitHub Desktop.
Download ZIP
Loading CSS Ellipsis
Raw
index.html
<div class="loading_ellipsis">
Loading
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
</div>
Raw
style.css
.loading_ellipsis {
background: #eee;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1em;
padding: 20px;
text-align: center;
}
.loading_ellipsis span {
background: #000;
border-radius: 50%;
display: inline-block;
height: 3px;
width: 3px;
margin-right: 4px;
animation: loading_dots 0.8s linear infinite;
-webkit-animation: loading_dots 0.8s linear infinite;
-moz-animation: loading_dots 0.8s linear infinite;
-ms-animation: loading_dots 0.8s linear infinite;
}
.loading_ellipsis .two {
-webkit-animation-delay: 0.2s;
}
.loading_ellipsis .three {
-webkit-animation-delay: 0.4s;
}
@-webkit-keyframes loading_dots {
0% { background: #eee; width: 3px; height: 3px; margin-right: 4px; }
25% { background: #ccc; width: 5px; height: 5px; margin-right: 2px; }
33% { background: #333; width: 3px; height: 3px; margin-right: 4px; }
100% { background: #000; width: 3px; height: 3px; margin-right: 4px; }
}
@xspirkovska
Copy link
Author

http://codepen.io/nikolinass/pen/LEqOgm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment