Страница 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
Спасибо большое! Всё работает!