HTML
<div class='loading'> <span></span> <span></span> <span></span> <span></span> </div>CSS
.loading {text-align:center;} .loading span { display:inline-block; margin:0px 1px; width:20px; height:20px; background-color:cyan; } .loading span:nth-child(1) { -webkit-animation:loading 0.5s infinite alternate 0s; -moz-animation:loading 0.5s infinite alternate 0s; -ms-animation:loading 0.5s infinite alternate 0s; -o-animation:loading 0.5s infinite alternate 0s; animation:loading 0.5s infinite alternate 0s; } .loading span:nth-child(2) { -webkit-animation:loading 0.5s infinite alternate 0.2s; -moz-animation:loading 0.5s infinite alternate 0.2s; -ms-animation:loading 0.5s infinite alternate 0.2s; -o-animation:loading 0.5s infinite alternate 0.2s; animation:loading 0.5s infinite alternate 0.2s; } .loading span:nth-child(3) { -webkit-animation:loading 0.5s infinite alternate 0.4s; -moz-animation:loading 0.5s infinite alternate 0.4s; -ms-animation:loading 0.5s infinite alternate 0.4s; -o-animation:loading 0.5s infinite alternate 0.4s; animation:loading 0.5s infinite alternate 0.4s; } .loading span:nth-child(4) { -webkit-animation:loading 0.5s infinite alternate 0.6s; -moz-animation:loading 0.5s infinite alternate 0.6s; -ms-animation:loading 0.5s infinite alternate 0.6s; -o-animation:loading 0.5s infinite alternate 0.6s; animation:loading 0.5s infinite alternate 0.6s; } @-webkit-keyframes loading { 0% {opacity:0.1;} 100% {opacity:1; } } @-moz-keyframes loading { 0% {opacity:0.1;} 100% {opacity:1; } } @-ms-keyframes loading { 0% {opacity:0.1;} 100% {opacity:1; } } @-o-keyframes loading { 0% {opacity:0.1;} 100% {opacity:1; } } @keyframes loading { 0% {opacity:0.1;} 100% {opacity:1; } }