Pure html and css loading animation. Demo: http://jsfiddle.net/p2uurs8f/2/
.loader-wrapper{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background:#000;
}
.loader{
display:block;
position:relative;
left:50%;
top:50%;
width:250px;
height:250px;
border-radius:50%;
border:5px solid transparent;
border-top-color:#fff;
-webkit-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
margin:-125px 0 0 -125px;
z-index:1500
}
.loader:before{
content:"";
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:5px;
border-radius:50%;
border:5px solid transparent;
border-top-color:#fff;
opacity:0.6;
-webkit-animation:spin 6s linear infinite;
animation:spin 6s linear infinite
}
.loader:after{
content:"";
position:absolute;
top:15px;
left:15px;
right:15px;
bottom:15px;
border-radius:50%;
border:5px solid transparent;
border-top-color:#fff;
opacity:0.4;
-webkit-animation:spin 3s linear infinite;
animation:spin 3s linear infinite
}
@-webkit-keyframes spin{
0%{
transform:rotate(0deg);
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg)
}
100%{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg)
}
}
@-ms-keyframes spin{
0%{
transform:rotate(0deg);
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg)
}
100%{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg)
}
}
@keyframes spin{
0%{
transform:rotate(0deg);
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg)
}
100%{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg)
}
}
<div id="loader-wrapper" class="loader-wrapper">
<div id="loader" class="loader" style="opacity: 1;"></div>
</div>