регистрация
856материалов
3280комментариев
235тем на форуме
6813пользователей

Preloader для Вашего сайта


Описание:

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

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

Установка:

Вставьте код в «Нижнюю часть сайта»:
Код
<!-- Начало:Preloader -->
<div id="preloader">
          <div id="preloader-lines">
          <div id="preloader-lines__mask"></div>
          </div>
</div>
<script>
          // Preloader by bloject.ucoz.ru
          jQuery(function($) {
          $(window).load(function() {
              $("#preloader").fadeOut(700);
          });
          });
</script>
<style>
          /* Preloader by bloject.ucoz.ru */
          #preloader {
          background-color: #123;
          bottom: 0;
          display: block;
          height: 100%;
          left: 0;
          position: fixed;
          right: 0;
          top: 0;
          width: 100%;
          z-index: 11000;
          }
          #preloader-lines {
          width: 300px;
          height: 2px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: #f25;
          }
          #preloader-lines::before,
          #preloader-lines::after {
          content: '';
          width: 75%;
          height: 50%;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          background-color: #f25;
          animation: sub-lines 4s cubic-bezier(0.25, 0.65, 1, 0.85) infinite;
          }
          #preloader-lines::before {
          top: -20px;
          }
          #preloader-lines::after {
          bottom: -20px;
          }
          #preloader-lines__mask {
          width: 100%;
          height: 100%;
          position: absolute;
          z-index: 20;
          background-color: #123;
          animation: mask 4s cubic-bezier(0.25, 0.65, 1, 0.85) infinite;
          }
          @keyframes mask {
          0% {
              transform: scale(1, 1);
          }
          25% {
              transform: scale(0, 1);
          }
          75% {
              transform: scale(0, 1);
          }
          100% {
              transform: scale(1, 1);
          }
          }
          @keyframes sub-lines {
          0% {
              transform: translateX(-50%) scale(0, 1);
          }
          25% {
              transform: translateX(-50%) scale(0, 1);
          }
          50% {
              transform: translateX(-50%) scale(1, 1);
          }
          75% {
              transform: translateX(-50%) scale(0, 1);
          }
          100% {
              transform: translateX(-50%) scale(0, 1);
          }
          }
</style>
<!-- Конец:Preloader -->


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 07.02.2017 в 14:00
Материал просмотрен: 916 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 5 комментариев

Пожаловаться
Сказать спасибо
Источник

5 комментариев


С
Лучше ставить в верхнюю часть сайта!)ИМХО
Ромчик
Можете и в верхнюю часть)
T
Рамиль @Tarra-GON 30.03.2017 12:513
А можно сделать загрузчик в синих тонах? :)
T
Рамиль @Tarra-GON 30.03.2017 12:544
А всё, уже нашёл где это настраивается :)
Ṗṙĭṇṡḙṡṡᾀ
У меня не заходит в photo, вечная загрузка....
avatar
-50% на шаблоны от TemplateMonster
Создать сайт вместе с uKit.com
Статистики нашего сайта
Сегодня к нам присоединились: 0 человек
Пользователи и гости сейчас онлайн: 4 Сегодня наш портал посетили: чел
Сейчас на сайте: attentive
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 4
Гостей: 3
Пользователей: 1