<style type="text/css">
div.loading {width:200px; height:200px; position:relative; float:left; margin:0 10px;}
div.one {background:#222;}
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:#222;}
div.loading2 {width:200px; height:200px; background:#222; 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);}
}
/* for loading method #3 */
.loading3 {background:#222; width:640px; margin:10px 0 0 10px; height:100px; position:relative;}
.loading3 .loader {width:100%; position:absolute; height:6px; left:0; top:50%; margin-top:-3px;}
.loading3 .loader span {opacity:0;
position:absolute;
display:block;
width: 6px;
height: 6px;
background: #fff;
border-radius: 5px;
}
.loading3 .loader span:nth-of-type(1) {
-webkit-animation: loader 3s infinite;
animation: loader 3s infinite;
}
.loading3 .loader span:nth-of-type(2) {
-webkit-animation: loader 3s 0.2s infinite;
animation: loader 3s 0.2s infinite;
}
.loading3 .loader span:nth-of-type(3) {
-webkit-animation: loader 3s 0.4s infinite;
animation: loader 3s 0.4s infinite;
}
.loading3 .loader span:nth-of-type(4) {
-webkit-animation: loader 3s 0.6s infinite;
animation: loader 3s 0.6s infinite;
}
.loading3 .loader span:nth-of-type(5) {
-webkit-animation: loader 3s 0.8s infinite;
animation: loader 3s 0.8s infinite;
}
@-webkit-keyframes loader {
0% {opacity:0.5;
-webkit-animation-timing-function: ease-in;
right:100%;
}
40% {
opacity:0.9;
-webkit-animation-timing-function: linear;
right:53%;
}
50% {
opacity:1;
-webkit-animation-timing-function: linear;
right:50%;
}
60% {
opacity:0.9;
-webkit-animation-timing-function: ease-out;
right:47%;
}
100% {
opacity:0.5;
-webkit-animation-timing-function: ease-out;
right:0;
}
}
@keyframes loader {
0% {opacity:0.5;
animation-timing-function: ease-in;
right:100%;}
40% {
opacity:0.9;		  
animation-timing-function: linear;
right:53%;}
50% {
opacity:1;
animation-timing-function: linear;
right:50%;}
60% {
opacity:0.9;
animation-timing-function: ease-out;
right:47%;}
100% {
opacity:0.5;
animation-timing-function: ease-out;
right:0}
}
/* for loading method #4 */
.loading4 {background: #222; width:200px; height:200px; margin:10px; position:relative;}

.loading4 .loader {position:absolute; left:50%; top:50%; margin:-14px 0 0 -14px; width:28px; height:28px;
-webkit-animation: spin 10s infinite linear;
animation: spin 10s infinite linear;
}
.loading4 .loader span {display:block; position:absolute; width:28px; height:28px; opacity:0;
-webkit-animation: orbit 6s infinite;
animation: orbit 6s infinite;
}
.loading4 .loader span:after {content:""; position:absolute; background:#fff; width:5px; height:5px; border-radius:5px;
}
.loading4 .loader span:nth-child(2) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.loading4 .loader span:nth-child(3) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.loading4 .loader span:nth-child(4) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.loading4 .loader span:nth-child(5) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
@-webkit-keyframes orbit {
0% {
-webkit-transform:rotate(0deg); opacity:1;
-webkit-animation-timing-function:ease-out;
}
8% {
-webkit-transform:rotate(120deg);
-webkit-animation-timing-function:linear;
}
30% {
-webkit-transform:rotate(240deg);
-webkit-animation-timing-function:ease-in-out;
}
40% {
-webkit-transform:rotate(420deg);
-webkit-animation-timing-function:linear;
}
65% {
-webkit-transform:rotate(540deg); opacity:1;
-webkit-animation-timing-function: ease-out;
}
70% {
-webkit-transform:rotate(660deg); opacity:1;
-webkit-animation-timing-function: ease-out;
}
70.1% {
-webkit-transform:rotate(660deg); opacity:0;
}
100% {
-webkit-transform:rotate(720deg); opacity:0;} 
}

@-webkit-keyframes spin { 
0% {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);}
}
@keyframes orbit { 
0% {
transform:rotate(0deg); opacity:1;
animation-timing-function:ease-out;
}
8% {
transform:rotate(120deg);
animation-timing-function:linear;
}
30% {
transform:rotate(240deg);
animation-timing-function:ease-in-out;
}
40% {
transform:rotate(420deg);
animation-timing-function:linear;
}
65% {
transform:rotate(540deg); opacity:1;
animation-timing-function: ease-out;
}
70% {
transform:rotate(660deg); opacity:1;
animation-timing-function: ease-out;
}
70.1% {
transform:rotate(660deg); opacity:0;
}
100% {
transform:rotate(720deg); opacity:0;} 
}
@keyframes spin { 
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
</style>
<br><br>
<div class ="loading one"></div>
<div class ="loading two"></div>
<div class ="loading2 three"></div>
<br clear="all">
<div class ="loading3">
    <div class ="loader">
	   <span></span>
	   <span></span>
	   <span></span>
	   <span></span>
	   <span></span>
    </div>
</div>
<div class ="loading4">
    <div class ="loader">
	   <span></span>
	   <span></span>
	   <span></span>
	   <span></span>
	   <span></span>
    </div>
</div>
<br clear="all"><br>