preloaders

Универсальный прилоадер для страниц WordPress и не только

И так друзья, все достаточно просто. Необходимо в начале страницы или записи разместить данный код:

<style>
#preloader{
    background: #002965;
    background: white;
    display: block;
    position: fixed;
    height: 100vh;
    margin-top: -81px;
  /*  margin-left: -778px;*/
}

#preloader figure{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 250px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
#wraper{
    display: none;
}
.hide{
    display: none;
}
</style>
<!--Preloader block-->
<div id="preloader">
    <figure>
        <img src="//bestanimations.com/Science/Gears/loadinggears/loading-gears-animation-3.gif" alt="" />
    </figure>
</div>

И в конце страницы, (после всего контента страницы) добавить данный код:

<script>
(function($) {
 var preloader = document.getElementById('preloader');
window.onload = function(){
    $(document).ready(function($) {
        var preloader = $('#preloader');
        var wraper = $('#wraper');
        wraper.css('display', 'block');
        preloader.fadeOut('slow');;
    });
}
})(jQuery);
</script>

Стили естественно необходимо подправлять для каждого случая индивидуально.