Simple Page Preloader

index.html

<!-- PRELOADER -->
<div class="loader">
<svg class="svg-ani" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64" fill="#3289AC">
  <circle cx="16" cy="3" r="2.88852">
    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/>
  </circle>
  <circle transform="rotate(45 16 16)" cx="16" cy="3" r="2.11179">
    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.125s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/>
  </circle>
  <circle transform="rotate(90 16 16)" cx="16" cy="3" r="0.622049">
    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.25s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/>
  </circle>
  <circle transform="rotate(135 16 16)" cx="16" cy="3" r="0">
    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.375s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/>
  </circle>
  <circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/>
  </circle>
  <circle transform="rotate(225 16 16)" cx="16" cy="3" r="0">
    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.625s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/>
  </circle>
  <circle transform="rotate(270 16 16)" cx="16" cy="3" r="0.560079">
    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.75s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/>
  </circle>
  <circle transform="rotate(315 16 16)" cx="16" cy="3" r="1.81128">
    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.875s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/>
  </circle>
  <circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
    <animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/>
  </circle>
</svg>
</div> 
<!-- //PRELOADER -->

<h1 class="center-a">Page Preloader</h1>

script.js

/*-----------------------------------------------------------------------------------*/
/*	PRELOADER 
/*-----------------------------------------------------------------------------------*/
jQuery(window).load(function() {
    //Preloader
    setTimeout("jQuery('.loader').animate({'opacity' : '0'},300,function(){jQuery('.loader').hide()})", 1500);
    setTimeout("jQuery('.preloader_hide, .selector_open').animate({'opacity' : '1'},500)", 1500);

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Simple Page Preloader.markdown

Simple Page Preloader

A Pen by creotip on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,600,700); 
 
body{
background: -webkit-linear-gradient(45deg, #03D38E 0%, rgba(3, 211, 142, 0) 70%), -webkit-linear-gradient(315deg, #DD09EC 10%, rgba(221, 9, 236, 0) 80%), -webkit-linear-gradient(225deg, #03C4DD 10%, rgba(3, 196, 221, 0) 80%), -webkit-linear-gradient(135deg, #AA09D3 100%, rgba(170, 9, 211, 0) 70%);
background: linear-gradient(45deg, #03D38E 0%, rgba(3, 211, 142, 0) 70%), linear-gradient(135deg, #DD09EC 10%, rgba(221, 9, 236, 0) 80%), linear-gradient(225deg, #03C4DD 10%, rgba(3, 196, 221, 0) 80%), linear-gradient(315deg, #AA09D3 100%, rgba(170, 9, 211, 0) 70%);
  
}  

.center-a {
position: absolute;
display: block;
color: #FFF;
top: 40%;
left: 0; 
right: 0;
text-align: center; 
font-family: raleway;
text-transform: uppercase;
font-weight: 800;
font-size: 62px;
text-shadow: 3px 3px rgba(0, 0, 0, 0.25);
}

/* Preloader */
.loader_hide {opacity:0; width:100%; overflow-x:hidden;}
.loader {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:#ecf0f1;
    z-index: 99999; 
}

.svg-ani {  
margin-left: auto;  
  margin-right: auto; 
position: absolute;  
top: 20rem; 
left: 0;
bottom: 0;
right: 0;
}

svg path, svg rect {
fill: #FF6700;
}

styles

<link href="//oss.maxcdn.com/foundation/5.4.4/css/foundation.css" rel="stylesheet" />