1

Тема: Заставка при ожидании полной загрузки страницы сайта

Необходимо отобразить прелоадер - анимированую картинку-индикатор полной загрузки страницы сайта.

Подключаем Jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.31.1/jquery.min.js"></script>

JS:

<script>
$(window).on('load', function () {
 var $preloader = $('#page-preloader'),
 $spinner = $preloader.find('.spinner');
 $spinner.fadeOut();
 $preloader.delay(350).fadeOut('slow');
});
</script>

HTML:

<div id="page-preloader"><span class="spinner"></span></div>

CSS:

#page-preloader {
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 background: #000;
 z-index: 100500;
 opacity:1;
}
#page-preloader .spinner {
 width: 43px;
 height: 43px;
 position: absolute;
 left: 50%;
 top: 50%;
 background: url('../images/spinner.gif') no-repeat 50% 50%;
 margin: -26px 0 0 -26px;
}

Картинка-заставка spinner.gif

Post's attachments

spinner.gif, 6.67 kb, 43 x 43
spinner.gif 6.67 kb, 75 downloads since 2018-07-24 

Поделиться

2

Re: Заставка при ожидании полной загрузки страницы сайта

Генератор картинок заставок для прелоадера www.ajaxload.info/

Сайт uid-poa4azg3

Поделиться

3 (2018-07-30 11:44:45 отредактировано icedragonyp)

Re: Заставка при ожидании полной загрузки страницы сайта

Наноскопический прогресс-бар (индикатор прогресса загрузки/подгрузки страницы сайта) на AJAX. Анимация полоски прогресса происходит в реальном времени, визуально показывая пользователю текущий процент загрузки страницы. Кроме этого в верхем правом углу страницы дополнительно отображается вращающийся спиннер. Скачать, а так же посмотреть демо версию работы скрипта NProgress.js можно на сайте производителя. Оценить работу прогресс-бара можно и на реальном сайте - payeer.com. Здесь все изменения, происходящие со страницей во время работы пользователя с сайтом (навигация по пунктам меню, обновления списков заявок и прочее...) реализованы в режиме асинхронной подгрузки на страницу необходимых данных.

Сайт icedragonyp

Поделиться