Skip to content

Instantly share code, notes, and snippets.

@joeybaker

joeybaker/gist:2654956

Created May 10, 2012 18:37
Show Gist options
  • Save joeybaker/2654956 to your computer and use it in GitHub Desktop.
Save joeybaker/2654956 to your computer and use it in GitHub Desktop.
Download ZIP
CSS spinner
Raw
gistfile1.html
<!doctype html>
<title>Image-free spinner</title>
<style>
@-webkit-keyframes fadeOut {
0% { opacity:1; }
100% { opacity:.1; }}
p {
position:absolute;
overflow:hidden;
top:50%;
left:50%;
width:16px;
height:0;
margin:-8px 0 0 -8px;
padding-top:16px;}
p * {
position:absolute;
width:25%;
height:25%;
background:rgb(0,0,0);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-webkit-animation:fadeOut 1s linear infinite;}
p :nth-child(1) {
top:0;
right:6px;
-webkit-animation-delay:.125s;}
p :nth-child(2) {
top:2px;
right:2px;
-webkit-animation-delay:.25s;}
p :nth-child(3) {
top:6px;
right:0;
-webkit-animation-delay:.375s;}
p :nth-child(4) {
bottom:2px;
right:2px;
-webkit-animation-delay:.5s;}
p :nth-child(5) {
bottom:0;
right:6px;
-webkit-animation-delay:.625s;}
p :nth-child(6) {
bottom:2px;
left:2px;
-webkit-animation-delay:.75s;}
p :nth-child(7) {
bottom:6px;
left:0;
-webkit-animation-delay:.875s;}
p :nth-child(8) {
top:2px;
left:2px;}
</style>
<p>
Loading
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment