«
»
WordPressWordPress - jQueryВсе для разработки плагинов

Универсальный прилоадер для страниц 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>

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

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

Связанные записи
WordPressЮмор

Как сделать так, чтобы загрузка вашего WordPress сайта была действительно медленной (100% серьезный пост) 😂

Windows инструкцииWordPress

Как разделить большие файлы XML в WordPress

PageSpeed InsightsWordPressПлагины

Как отключить плагины WordPress на определенных страницах и постах с плагином и без (через функцию)

WordPressПлагины

Создать сайт членства с WordPress