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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Индикатор загрузки страницы SVG</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: #000;
 overflow: hidden !important;
 z-index: 99999;
}
.loadersvg {
 height: 120px;
 width: 120px;
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -60px 0 0 -60px;
}
.g-circles {
 fill: orangered;
}
.g-circle {
 transform-origin: 60px 60px;
 animation: 1.2s linear infinite;
 animation-name: colors, opacity;
}
.g-circle:nth-child(12n + 1) {
 transform: rotate(-30deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.1s;
}
.g-circle:nth-child(12n + 2) {
 transform: rotate(-60deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.2s;
}
.g-circle:nth-child(12n + 3) {
 transform: rotate(-90deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.3s;
}
.g-circle:nth-child(12n + 4) {
 transform: rotate(-120deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.4s;
}
.g-circle:nth-child(12n + 5) {
 transform: rotate(-150deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.5s;
}
.g-circle:nth-child(12n + 6) {
 transform: rotate(-180deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.6s;
}
.g-circle:nth-child(12n + 7) {
 transform: rotate(-210deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.7s;
}
.g-circle:nth-child(12n + 8) {
 transform: rotate(-240deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.8s;
}
.g-circle:nth-child(12n + 9) {
 transform: rotate(-270deg) translate(10px, 10px) scale(0.85);
 animation-delay: -0.9s;
}
.g-circle:nth-child(12n + 10) {
 transform: rotate(-300deg) translate(10px, 10px) scale(0.85);
 animation-delay: -1s;
}
.g-circle:nth-child(12n + 11) {
 transform: rotate(-330deg) translate(10px, 10px) scale(0.85);
 animation-delay: -1.1s;
}
.g-circle:nth-child(12n + 12) {
 transform: rotate(-360deg) translate(10px, 10px) scale(0.85);
 animation-delay: -1.2s;
}
@-webkit-keyframes opacity {
 0% {
 fill-opacity: 1;
 }
 75% {
 fill-opacity: 0;
 }
}
@keyframes opacity {
 0% {
 fill-opacity: 1;
 }
 75% {
 fill-opacity: 0;
 }
}
@-webkit-keyframes colors {
 0% {
 fill: orangered;
 }
 50% {
 fill: teal;
 }
}
@keyframes colors {
 0% {
 fill: orangered;
 }
 50% {
 fill: teal;
 }
}
@-webkit-keyframes transform {
  50% {
    transform: scale(0.5);
  }
}
@keyframes transform {
  50% {
    transform: scale(0.5);
  }
} 
</style> 
<script>
jQuery(window).load(function() {
 $(".loadersvg").fadeOut();
 $(".preloader").delay(1000).fadeOut("slow");
});
</script>
</head>
<body>
<div class="preloader">
<svg viewBox="0 0 120 120" class="loadersvg">
   <symbol id="s-circle">
     <circle r="10" cx="10" cy="10"></circle>
   </symbol>
   <rect width="100%" height="100%"/>
    <g id="circle" class="g-circles">
      <g class="g-circle">
        <use xlink:href="#s-circle" class="u-circle"/>
      </g>  
      <g class="g-circle">
        <use xlink:href="#s-circle" class="u-circle"/>
      </g>
      <g class="g-circle">
        <use xlink:href="#s-circle" class="u-circle"/>
      </g>
      <g class="g-circle">
        <use xlink:href="#s-circle" class="u-circle"/>
      </g>
      <g class="g-circle">
        <use xlink:href="#s-circle" class="u-circle"/>
      </g>
      <g class="g-circle">
        <use xlink:href="#s-circle" class="u-circle"/>
      </g>
      <g class="g-circle">
        <use xlink:href="#s-circle" class="u-circle"/>
      </g>
      <g class="g-circle">
        <use xlink:href="#s-circle" class="u-circle"/>
      </g>
      <g class="g-circle">
        <use xlink:href="#s-circle" class="u-circle"/>
      </g>
      <g class="g-circle">
        <use xlink:href="#s-circle" class="u-circle"/>
      </g>
      <g class="g-circle">
        <use xlink:href="#s-circle" class="u-circle"/>
      </g>
      <g class="g-circle">
        <use xlink:href="#s-circle" class="u-circle"/>
      </g>
    </g>
  </svg>
</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>