Индикатор загрузки страницы CSS

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Индикатор загрузки страницы CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/assets/js/jquery-2.1.1.min.js"></script>
<style>
.preloader {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 background: #fff;
 overflow: hidden !important;
 z-index: 99999;
}
.loaderbig {
 background-color: rgba(0,0,0,0);
 border:5px solid rgba(0,183,229,0.9);
 opacity:.9;
 border-top:5px solid rgba(0,0,0,0);
 border-left:5px solid rgba(0,0,0,0);
 border-radius:50px;
 box-shadow: 0 0 35px #2187e7;
 width:50px;
 height:50px;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -25px 0 0 -25px;
 -webkit-animation:loaderbig .5s infinite linear;
 animation:loaderbig .5s infinite linear;
}
.loadersmall {
 background-color: rgba(0,0,0,0);
 border:5px solid rgba(0,183,229,0.9);
 opacity:.9;
 border-top:5px solid rgba(0,0,0,0);
 border-left:5px solid rgba(0,0,0,0);
 border-radius:50px;
 box-shadow: 0 0 15px #2187e7; 
 width:30px;
 height:30px;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -15px 0 0 -15px;
 -webkit-animation:loadersmall .5s infinite linear;
 animation:loadersmall .5s infinite linear;
}
@-webkit-keyframes loaderbig {
 0% { -webkit-transform:rotate(0deg); }
 100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes loadersmall {
 0% { -webkit-transform:rotate(0deg); }
 100% { -webkit-transform:rotate(-360deg); }
}
@keyframes loaderbig {
 0% { transform:rotate(0deg); }
 100% { transform:rotate(360deg); }
}
@keyframes loadersmall {
 0% { transform:rotate(0deg); }
 100% { transform:rotate(-360deg); }
}
</style> 
<script>
jQuery(window).load(function() {
 $(".loaderbig, .loadersmall").fadeOut();
 $(".preloader").delay(1000).fadeOut("slow");
});
</script>
</head>
<body>
<div class="preloader">
<div class="loadersmall"></div>
<div class="loaderbig"></div>
</div>

<iframe src="http://atmpl.ru/" frameborder="0"></iframe>
<iframe src="http://atmpl.ru/load" frameborder="0"></iframe>
<iframe src="http://atmpl.ru/publ" frameborder="0"></iframe>
<style>
[src^="http://atmpl.ru"]{display:table;margin:0 auto;max-width:100%;}
</style>

</body>
</html>