Simple Animated Loader using Css
by muthu[ Edit ] 2013-10-31 12:18:03
Css Animated Loader with out images using only css code.
Html Code
<div class="bg">
<div class='red_loader'></div>
<p align="center">
Loading </p>
</div>
.bg { width:60px; height:80px; background:#0099cc; padding:10px; color:#fff;
font:12px Verdana, Geneva, sans-serif; }
.red_loader { width:50px; height:50px; border-left:4px dashed #fff;
border-top:4px dashed #fff; border-radius:100px;
animation:spinnerRotate 1s linear infinite;
-webkit-animation:spinnerRotate 1s linear infinite;
}
@keyframes spinnerRotate { 0% {transform : rotate(0deg)}
100% {transform : rotate(360deg)}
}
