Very simple pre-loader for webpage using jquery

Webpage pre loader is one of the important thing. It is used to display loader image before page loads because it is the better way to display the web pages.If you didn't add pre-loader it won't display the page perfect manner because the browser doesn't know which one is execute first.

You can able to see some websites displays text and images without proper manner while page is loading because the css and js file not loading before the body text. So the only purpose we are using the page pre-loader

Here i am not displayed and loader image the loader image created by using css file below. when using pre loader it display the webpages after loads all the scripts until it shows the loader image. the below example and demo are available check it now.

Css for pre-loader for webpage

#page-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: #FFF none repeat scroll 0% 0%;
z-index: 99999;
}
#page-loader .preloader-interior {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #aadb34;

    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#page-loader .preloader-interior:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #aadb34;

    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#page-loader .preloader-interior:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #aadb34;

    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

Js for pre-loader for webpage

<script>

$(window).load(function(){

    $('#page-loader').fadeOut(1500);

});

</script>

Html code for pre-loader for webpage

<div id="page-loader"><span class="preloader-interior"></span></div>
<h2>Preloader Test....</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivHkyiHLGbmbuK7O-wHI3YClYI0FZn61_6QRvRfNRDKKe0ejgDrJVAaByBeJqK0fq-q9GmCqjktekp9oP2K5ovbZv_PMYY7_P5u9n7ZUDh6iCJo426Chd2OJAnb-2g1yLUZ0RX5OzvvBE/s1600/film+roll+effect.jpg" style="width:500px;" />
<h1>www.sanwebcorner.com</h1>
</div>