Индикатор загрузки страницы — preloader

Индикатор загрузки страницы — preloader

16 078 в JavaScript 17

Приветствую всех на своем блоге! Сегодня речь пойдет о простом скрипте, который позволяет показывать определенную заглушку пока страница полностью не загрузится. Если копнуть глубже — заглушка исчезает, когда DOM полностью загружен и готов к работе.

В качестве заглушки обычно используют индикатор в виде какой либо анимации, его еще называют preloader. Можно использовать обычную gif-картинку или анимацию средствами Css. Вот пример gif-анимации:

Html

Вставляем данный html-код на все страницы, где хотим показывать прелодер. Обычно я его вставляю в самом низу страницы перед подключением скриптов.

<div class="preloader">
    <div class="preloader__loader">
        <img src="loader.gif" alt="" />
    </div>
</div>

javaScript

Добавляем данный jQuery-код перед закрывающим тегом </body>.

<script>
// Preloader page
jQuery(document).ready(function($) {
	$(window).on('load', function () {
		var $preloader = $('.preloader'),
		    $loader = $preloader.find('.preloader__loader');
		$loader.fadeOut();
		$preloader.delay(250).fadeOut(200);
	});
});
</script>

Значениями в .delay() (задержка) и .fadeOut() (плавное исчезновение) можно регулировать исчезновения прелодера.

Css

Оформим стилями CSS.

<style>
.preloader {
    background-color: #fff;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
}
.preloader__loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
</style>
Сразу отмечу, что данные стили добавляем не в общий файл Css, а вставляем сразу до закрывающего тега </head> на html-странице. Это своего рода критический Css — стили прелодера должны показываться сразу и без задержек.

Вообще, стили можно минимизировать, чтобы они занимали меньше места.

Как уже было сказано выше, вместо gif-картинки можно использовать анимацию на Css. Например, я использую спиннеры, которые появились в Бутстрап. Вот как это выглядит.

Загрузка…

Html-код будет следующим.

<div class="preloader">
    <div class="preloader__loader">
        <div class="spinner-grow text-danger" role="status" style="width: 4rem; height: 4rem;">
            <span class="sr-only">Загрузка...</span>        
        </div>
    </div>
</div>

На этом все. Если у вас есть, чем дополнить, буду только рад.

Читайте также:  Создаем всплывающие окна для сайта - Magnific Popup

Всем удачи и до новых встреч!

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (3 оценок, среднее: 5,00 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории