CSS3 Loding Animation ( No Images )

.container { width:230px; position:relative; background:#666; padding:2px; }
.main { width:90%; margin:0 auto; position:relative; }
.bar { font-size:20px; width:10em; height:1em; position:relative; margin:10px auto; border-radius:.5em; background:#333;
box-shadow:0 0 0 .05em rgba(100,100,100,0.075), 0 0 0 .25em rgba(0,0,0,0.1), inset 0 .1em .05em rgba(0,0,0,0.1), 0 .05em rgba(255,255,255,0.7); }
.bar:after { content:"Loading"; position:absolute; left:25%; top:150%; font-family:Arial, Helvetica, sans-serif; font-size:1em;
color:#f00; text-shadow:0 .05em rgba(255,255,255,0.7); }
.bar .sphere { border-radius:50%; width:1em; height:100%; background:-webkit-linear-gradient(#f00, #960202); background:-moz-linear-gradient(#f00, #960202);
background:-ms-linear-gradient(#f00, #960202); background:-o-linear-gradient(#f00, #960202); background:linear-gradient(#f00, #960202);
box-shadow:inset 0 .15em .1em rgba(255,255,255,0.3), inset 0 -.1em .15em rgba(0,0,0,0.15), 0 0 .25em rgba(0,0,0,0.3); display:block;
-webkit-animation:slide 1.75s ease-in-out infinite alternate; -moz-animation:slide 1.75s ease-in-out infinite alternate;
-ms-animation:slide 1.75s ease-in-out infinite alternate; -o-animation:slide 1.75s ease-in-out infinite alternate; animation:slide 1.75s ease-in-out infinite alternate; }
@-webkit-keyframes slide { to { margin-left:90%; } } @-moz-keyframes slide { to { margin-left:90%; } } @-ms-keyframes slide { to { margin-left:90%; } }
@-o-keyframes slide { to { margin-left:90%; } } @keyframes slide { to { margin-left:90%; } }

<div class="container">
<section class="main">
<div class="bar">
<i class="sphere"></i>
</div>
</section>
</div>

Tagged in:

• css3 loding animation
• css3 loder
• loding css3
• css3 animaion