Amazing loading Animation CSS3 by Muthujoo ( No image )
by muthu[ Edit ] 2014-01-22 11:03:07
Amazing loading Animation CSS3
------------------------------------------ DEMO ---------------------------------------------------------
------------------------------------------ CSS3 ---------------------------------------------------------
.loding { width:200px; height:200px; background:#017cbc; padding:10px; border:5px solid #000; }
.circle { width:170px; height:170px; border-radius:50%; border:15px solid #ff0036; background:#fff; position:absolute; font:bold 20px Tahoma, Geneva, sans-serif;
text-align:center; }
.dot { position:absolute; width:25px; height:25px; background:#FFF; border:3px solid #ff0036; border-radius:50%; top:20px; left:20px; }
.center { width:200px; height:200px; position:absolute; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;
-webkit-animation-name:orbit; -webkit-animation-duration:5s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear;
-moz-animation-name:orbit; -moz-animation-duration:5s; }
@-webkit-keyframes orbit { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
@-moz-keyframes orbit { from { -moz-transform:rotate(0deg) } to { -moz-transform:rotate(360deg) } }
------------------------------------------ HTML5 --------------------------------------------------------
<div class="loding">
<div class="circle"><br>Loding <br>CSS3 <br> Animation<br>by<br>Muthujoo</div>
<div class="center">
<div class="dot"></div>
</div>
</div>
