/* DEMO 1 */  
  main:after {  
content:"";  
z-index: -1;  
position: absolute;  
top: 0;  
right: 0;  
bottom: 0;  
left: 0;  
background: -webkit-radial-gradient(center center, circle cover, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));  
background: -moz-radial-gradient(center center, circle cover, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));  
background: -ms-radial-gradient(center center, circle cover, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));  
background: -o-radial-gradient(center center, circle cover, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));  
background: radial-gradient(center center, circle cover, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));  
  }  
  .bar {  
font-size: 20px;  
width: 10em;  
height: 1em;  
position: relative;  
margin: 100px auto;  
border-radius: .5em;  
background: rgba(255, 255, 255, 0.6);  
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:"Загрузка...";  
position: absolute;  
left: 25%;  
top: 150%;  
font-family:'Carrois Gothic', sans-serif;  
font-size: 1em;  
color: #555;  
text-shadow: 0 .05em rgba(255, 255, 255, 0.7);  
  }  
  .bar .sphere {  
border-radius: 50%;  
width: 1em;  
height: 100%;  
background: -webkit-linear-gradient(#eee, #ddd);  
background: -moz-linear-gradient(#eee, #ddd);  
background: -ms-linear-gradient(#eee, #ddd);  
background: -o-linear-gradient(#eee, #ddd);  
background: linear-gradient(#eee, #ddd);  
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%;  
}  
  }

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