TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

957

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

<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>

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

Источник записи: https://mediadoma.com

Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее