» »

Вид загрузки Preloader для сайта uCoz

Вид загрузки Preloader для сайта uCoz

Этот материал идет под загрузку страниц для сайта uCoz, где при переходе все наблюдают анимацию, что происходит до полной загрузки страницы. Как вообще работает такой скрипт, то здесь многие встречали на разных сайтах, где при переходе появляется изображение, так называемый Preloader, только здесь все настроено под конструктор, хотя на сайте codepen, где идет demo страница, этот скрипт отлично и корректно работает.

Но здесь плюс в том, что тематически его сделать не сложно, только нужно поменять ссылку, которая идет на формате gif. Так что устанавливаем скрипт в низ сайта, это чтоб его можно было при загрузке на всех страницах наблюдать. Но потом вы можете найти интересное решение, что показывается в анимации, и поменять в самом коде.

Также ниже оставлю одно предложение, ведь зайдя в поиск можно найти много, но здесь нужно рассчитывать еще на размеры. Вот этот загрузчик закрепил, где копируем ссылку и меняем, если кого больше устраивает. Ведь искал такую тему, чтоб могла картинка подойти под множество тематических направлений сайта.



Установка:

Чтоб наблюдать эффект загрузки на всех страницах, включая все модули. То остается зайти в админ панель и вниз или вверх сайта устанавливаем и сохраняем.

Код
<style type="text/css">#kogedsavunad>p{display:none;}#bteditok_labedukagu_vaced{display: block;position: fixed;z-index: 99999;top: 0;left: 0;width: 100%;height: 100%;min-width: 1000px;background: #ecd37011 url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/Loading_icon.gif) center center no-repeat;background-size:238px;}</style>  
<div id="kogedsavunad"><div id="bteditok_labedukagu_vaced"></div></div>  
<script type="text/javascript">var ufive_loadpreloader = document.getElementById("bteditok_labedukagu_vaced");function fadeOutnojquery(el){el.style.opacity = 1;var ufiveloadpreloader = setInterval(function(){el.style.opacity = el.style.opacity - 0.05;if (el.style.opacity <=0.05){ clearInterval(ufiveloadpreloader);ufive_loadpreloader.style.display = "none";}},16);}window.onload = function(){setTimeout(function(){fadeOutnojquery(ufive_loadpreloader);},1000);};</script>

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

Ведь не весь формат gif идет на прозрачном фоне, у многих он по умолчанию задан, что если понравился элемент анимации, то останется под него оттенок фона выставить.

Демонстрация
2019-05-07 Загрузок: 1 Просмотров: 433 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
YaVi
YaVi 2019-05-07 19:181
0
Неплохой Preloader.
Kosten
Kosten 2019-05-08 00:212
0
Нормальный, но как понимаю, это своеобразный намек на источник, без проблем, напишите в комментариях, что вы создали, и кликабельная ссылка будет установлена.
YaVi
YaVi 2019-05-08 07:144
0
Ошибаешься на счёт источника. Я просто прокомментировал материал и не больше
Kosten
Kosten 2019-05-08 03:213
0
Если кому то нужен формат GIF, то можете посмотреть на одном сайте, где реально большая подборка, которая больше на аварат идет, и под загрузку можно найти.

Сайт: www.gifki.ru/page768.html
YaVi
YaVi 2019-05-08 07:155
0
А вот за это отдельное спасибо, пригодиться на будущее)
avatar