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


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

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

Установка: 

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


Комментариев 0
Привет, оставишь комментарий?
Имя:*
E-Mail:


Внимание!

Пожертвование
Мы принимаем WebMoney

R807857153548
Z417987712394
B281910665473
Обновления new
  • Переход направление вверх и вниз на CSS
  • Эффект направление вверх и вниз выпадающего списка, который создан при помощи CSS, где может скрыть информацию и по клику открыть список.

  • Wonde - универсальный бизнес шаблон для uCoz
  • Бесплатный новостной шаблон сайта в стиле минимализма. Хорошее решение для ведения своего блога или портала новостей. Все чисто и аккуратно.&nbs ..

  • Горизонтальный топ пользователей по репутации для uCoz
  • Топ пользователей по репутации как на RootGames.Ru на данный момент, пример можете увидеть в персональной странице пользователя в са ..

  • Переключатель с использованием CSS и JS
  • Думаю многим интересно процесс создания оригинальных переключателей, которые можно увидеть на любом тематическом сайте под функцией.

  • Выпадающее горизонтальное меню с помощью CSS
  • По сути выпадающее меню или навигация представляет собой горизонтальный список разнообразных, но скорей всего тематических запросов под параметр ..

Информация