Simple Loading Animation CSS3
by muthu[ Edit ] 2013-12-23 14:32:20
------------------------------------------------ DEMO ------------------------------------------------
------------------------------------------------ CSS3 ------------------------------------------------
.loading { position:absolute; left:50%; top:50%; margin:-60px 0 0 -60px; background:#19bee1; width:100px; color:#fff;
height:100px; border-radius:100%; border:10px solid #fff; font:bold 12px Arial, Helvetica, sans-serif; line-height:100px; text-align:center; }
.loading:after { content:''; background:trasparent; width:140%; height:140%; position:absolute;
border-radius:100%; top:-20%; left:-20%; opacity:0.7; box-shadow:rgba(255, 255, 255, 0.6) -4px -5px 3px -3px; animation:rotate 2s infinite linear; }
@keyframes rotate { 0% { transform:rotateZ(0deg); }
100% { transform:rotateZ(360deg); } }
------------------------------------------------ HTML5 ------------------------------------------------
<div class="loading">Loading</div>
