Preloader для Вашего сайта - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


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

Прелоадер — это индикатор загрузки сайта. Он может быть выполнен как в виде анимированного 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 -->

Важно!

При копировании материала указывать ссылку на источник.

- 451
- 24-Мая-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта