Страница 1 из 1

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

Добавлено: 27 сен 2016, 09:58
beholder
Хочу поделиться интересным "рецептом" для создания эффектного индикатора загрузки посередине страницы.
Создана по мотивам существующего расширения 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>
"крутилка" исчезает только после полной загрузки страницы и всех содержащих ее скриптов.
Изображение

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

Добавлено: 06 ноя 2016, 16:17
mfm
Спасибо большое! Всё работает! :Yahoo!: