Simple Animated Loader using Css

by muthu 2013-10-31 12:18:03

Css Animated Loader with out images using only css code.

loader.gif

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)}
}
455
like
0
dislike
0
mail
flag

You must LOGIN to add comments