How to add perloader spiner in your html template

<!----- Preloader  Index ------->

<div id="perloader">
    <div class="spiner_perloader"></div>
</div>

/*---------------------------
Preloader Area CSS Code
----------------------------*/
body.perloader_active{position:absolute;width:100%;height:100%;left:0;top:0;overflow:hidden}
#perloader{position:absolute;width:100%;height:100%;left:0;top:0;background:#fff;content:"";z-index:9999}
.spiner_perloader{position:absolute;width:64px;height:64px;left:50%;top:50%;
background:url(img/spiner.gif) no-repeat scroll center center;display:block;content:"";
margin-left:-32px;margin-top:-32px;
}

Jquery
----------------------------------
$(document).ready(function(){
    $("body").addClass("perloader_active");
});
-----------------------------------
    $(window).load(function(){

        $("#perloader").fadeOut();
        $(".spiner_perloader").delay(350).fadeOut();
        $("body").removeClass("perloader_active");

    });