Skip to content

Instantly share code, notes, and snippets.

@mathieugagne
Created March 24, 2014 12:21
Show Gist options
  • Save mathieugagne/9739116 to your computer and use it in GitHub Desktop.
Save mathieugagne/9739116 to your computer and use it in GitHub Desktop.
div.loading {width:200px; height:200px; position:relative; float:left; margin:0 10px;}
div.one {background:#000;}
div.two {background:#09c;}
div.loading:after {display:block; content:"";
border-radius:2px;
height:2px; width:2px;
position:absolute;
margin:auto; left:0; top:0; right:0; bottom:0;
box-shadow:
10px 0 0 2px #eee,
7px 7px 0 2px #555,
0 10px 0 2px #555,
-7px 7px 0 2px #555,
-10px 0 0 2px #555,
-7px -7px 0 2px #888,
0 -10px 0 2px #ccc,
7px -7px 0 2px #ddd;
-webkit-animation:rotate 0.8s steps(8) infinite;
-o-animation:rotate 0.8s steps(8) infinite;
animation:rotate 0.8s steps(8) infinite;
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-o-keyframes rotate {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(360deg);}
}
/* second method */
div.loading2 {width:200px; height:200px; position:relative; float:left; margin:0 10px;}
div.three {background:#000;}
div.loading2 {width:200px; height:200px; background:#000; position:relative;}
div.loading2:before,
div.loading2:after {position:absolute; margin:auto; z-index:10; left:0; top:0; right:0; bottom:0; content:""; display:block; width:20px; height:20px; border:5px solid #fff; border-color:rgba(255,255,255,0.6) rgba(255,255,255,0.08) rgba(255,255,255,0.1) rgba(255,255,255,0.2) ; border-radius:200px;
}
div.loading2:before {
-webkit-animation:rotate1 1s steps(8) infinite;
-o-animation:rotate1 1s steps(8) infinite;
animation:rotate1 1s steps(8) infinite;
}
div.loading2:after {
-webkit-animation:rotate2 1s steps(8) infinite;
-o-animation:rotate2 1s steps(8) infinite;
animation:rotate2 1s steps(8) infinite;
}
@keyframes rotate1 {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
@-webkit-keyframes rotate1 {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-o-keyframes rotate1 {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(360deg);}
}
@keyframes rotate2 {
from {transform: rotate(-45deg);}
to {transform: rotate(315deg);}
}
@-webkit-keyframes rotate2 {
from {-webkit-transform: rotate(-45deg);}
to {-webkit-transform: rotate(315deg);}
}
@-o-keyframes rotate2 {
from {-o-transform: rotate(-45deg);}
to {-o-transform: rotate(315deg);}
}
<div class="loading one"></div>
<div class="loading two"></div>
<div class="loading2 three"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment