Статус загрузки страницы (крутилка в центре)

Интересные скрипты, хитрости, трюки с оформлением, "недокументированные" возможности, всяческие "довески" к форумам. HTML, CSS, JavaScript и т.п. (только готовые рецепты)
Правила форума
В этой теме выкладываем только готовые "рецепты", если у вас есть чем поделиться.
Пожалуйста, не нужно создавать темы с запросами на тот или иной скрипт
Ответить
Аватара пользователя

Автор темы
beholder
Администратор
Сообщения: 1225
Зарегистрирован: 02 янв 2015, 08:15
Откуда: Владивосток
Благодарил (а): 36 раз
Поблагодарили: 444 раза
Пол:
Контактная информация:

Статус загрузки страницы (крутилка в центре)

Сообщение beholder » 27 сен 2016, 09:58

Хочу поделиться интересным "рецептом" для создания эффектного индикатора загрузки посередине страницы.
Создана по мотивам существующего расширения PageLoader от Stoker
Может кому-нибудь покажется интересным.
итак:
закачиваем в "менеджер картинок" файл query.preloader.min.js (он во вложении к этому сообщению)
[+] добавить в overall_footer_after.html

Код: Выделить всё

<script type="text/javascript" src="{T_RANKS_PATH}jquery.preloader.min.js"></script>
<script>
(function($) { 

'use strict';

$(function() {
	$(window).preloader({
        delay: 500,
    });
});

})(jQuery);
</script>
[+] добавить в overall_header_body_before.html

Код: Выделить всё

<div id="preloader">
    <div id="preloader-inner"></div>
</div>
[+] добавить в overall_header_head_append.html

Код: Выделить всё

<style>
#preloader {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  z-index: 9999;
}

#preloader #preloader-inner {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  animation: spin 2s linear infinite
}

#preloader #preloader-inner:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  animation: spin 3s linear infinite
}

#preloader #preloader-inner:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  animation: spin 1.5s linear infinite
}
@keyframes 
spin { 0% {
transform:rotate(0deg)
}

to { transform: rotate(1turn) }
}
</style>
"крутилка" исчезает только после полной загрузки страницы и всех содержащих ее скриптов.
Изображение
Вложения
jquery.preloader.min.js
(590 байт) 24 скачивания
Поддержка GetBB.Ru
Бесплатный хостинг форумов PHPBB3

Ваши собственные домены с привязкой к форуму:
.ru - 200 руб./год , .рф - 250 руб./год. (кирилический домен)
in.ua - 7$/год. , .com,org,net - 12$/год.

Аватара пользователя

mfm
Сообщения: 17
Зарегистрирован: 14 июн 2016, 00:07
Благодарил (а): 6 раз
Пол:
Контактная информация:

Статус загрузки страницы (крутилка в центре)

Сообщение mfm » 06 ноя 2016, 16:17

Спасибо большое! Всё работает! :Yahoo!:

Ответить