Файлы Скрипты и модификации

Preloader.js – загрузка страницы как на YouTube

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

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

Установка скрипта:
Для начала подключаем CSS:
Код
.preloader {  
  position: fixed;  
  top: 0;  
  left: 0;  
  right: 0;  
  z-index: 1999999999;  
}  

.preloader.immune {  
  bottom: 0;  
}  

.preloader.white {  
  background-color: rgba(255, 255, 255, .3);  
}  

.preloader.black {  
  background-color: rgba(1, 1, 1, .3);  
}  

.preloader > i.radial-loader:not(:required) {  
  -moz-animation: radial-loader .5s infinite linear;  
  -webkit-animation: radial-loader .5s infinite linear;  
  animation: radial-loader .5s infinite linear;  
  border-color: #ea6052;  
  border-style: solid;  
  border-width: 2px;  
  border-right-color: transparent;  
  border-radius: 100%;  
  display: block;  
  position: relative;  
  float: right;  
  margin: 10px;  
  overflow: hidden;  
  width: 10px;  
  height: 10px;  
}  

.preloader > span.loading-bar {  
  -moz-animation: loading-bar 3s 1;  
  -webkit-animation: loading-bar 3s 1;  
  animation: loading-bar 3s 1;  
  display: block;  
  height: 2px;  
  background-color: #ea6052;  
  opacity: 0;  
  transition: width .5s;  
}  

.preloader > span.loading-bar.red-colored {  
  background-color: #ea6052;  
}  

.preloader > .red-colored.radial-loader {  
  border-color: #ea6052 !important;  
  border-right-color: transparent !important;  
}  

.preloader > span.loading-bar.blue-colored {  
  background-color: #3498db;  
}  

.preloader > .blue-colored.radial-loader {  
  border-color: #3498db !important;  
  border-right-color: transparent !important;  
}  

.preloader > span.loading-bar.green-colored {  
  background-color: #2ecc71;  
}  

.preloader > .green-colored.radial-loader {  
  border-color: #2ecc71 !important;  
  border-right-color: transparent !important;  
}  

.preloader > span.loading-bar.yellow-colored {  
  background-color: #f1c40f;  
}  

.preloader > .yellow-colored.radial-loader {  
  border-color: #f1c40f !important;  
  border-right-color: transparent !important;  
}  
/* Animations */  

@-moz-keyframes loading-bar {  
  0% {  
  width: 0%;  
  opacity: 1;  
  }  
  90% {  
  width: 90%;  
  opacity: 1;  
  }  
  100% {  
  width: 100%;  
  opacity: 0;  
  }  
}  

@-webkit-keyframes loading-bar {  
  0% {  
  width: 0%;  
  opacity: 1;  
  }  
  90% {  
  width: 90%;  
  opacity: 1;  
  }  
  100% {  
  width: 100%;  
  opacity: 0;  
  }  
}  

@keyframes loading-bar {  
  0% {  
  width: 0%;  
  opacity: 1;  
  }  
  90% {  
  width: 90%;  
  opacity: 1;  
  }  
  100% {  
  width: 100%;  
  opacity: 0;  
  }  
}  

@-moz-keyframes radial-loader {  
  0% {  
  -moz-transform: rotate(0deg);  
  transform: rotate(0deg);  
  }  
  100% {  
  -moz-transform: rotate(360deg);  
  transform: rotate(360deg);  
  }  
}  

@-webkit-keyframes radial-loader {  
  0% {  
  -webkit-transform: rotate(0deg);  
  transform: rotate(0deg);  
  }  
  100% {  
  -webkit-transform: rotate(360deg);  
  transform: rotate(360deg);  
  }  
}  

@keyframes radial-loader {  
  0% {  
  -moz-transform: rotate(0deg);  
  -ms-transform: rotate(0deg);  
  -webkit-transform: rotate(0deg);  
  transform: rotate(0deg);  
  }  
  100% {  
  -moz-transform: rotate(360deg);  
  -ms-transform: rotate(360deg);  
  -webkit-transform: rotate(360deg);  
  transform: rotate(360deg);  
  }  
}

Теперь подключаем js скрипт в нижнюю часть сайта перед </body>:
Код
<script>  
function preloader(immune, background, color) {  
  $('body').prepend('<div class="preloader"><span class="loading-bar"></span><i class="radial-loader"></i></div>');  
  if (immune == true) {  
  $('body > div.preloader').addClass('immune');  
  }  
  if (background == 'white') {  
  $('body > div.preloader').addClass('white');  
  } else if (background == 'black') {  
  $('body > div.preloader').addClass('black');  
  }  
  if (color == 'red') {  
  $('body > div.preloader span.loading-bar').addClass('red-colored');  
  $('body > div.preloader i.radial-loader').addClass('red-colored');  
  } else if (color == 'blue') {  
  $('body > div.preloader span.loading-bar').addClass('blue-colored');  
  $('body > div.preloader i.radial-loader').addClass('blue-colored');  
  } else if (color == 'green') {  
  $('body > div.preloader span.loading-bar').addClass('green-colored');  
  $('body > div.preloader i.radial-loader').addClass('green-colored');  
  } else if (color == 'yellow') {  
  $('body > div.preloader span.loading-bar').addClass('yellow-colored');  
  $('body > div.preloader i.radial-loader').addClass('yellow-colored');  
  }  
  $(window).load(function () {  
  setTimeout(function () {  
  $('.preloader').fadeOut(1000);  
  }, 1000);  
  setTimeout(function () {  
  $('.preloader').remove();  
  }, 2000);  
  });  
}  
;  
preloader(true, 'black', 'red');  
</script>
Источник: webmaster-ucoz.ru
Загрузка данных...
0 комментариев
Материал «Preloader.js – загрузка страницы как на YouTube» ещё никто не комментировал.
Добавлять комментарии могут только зарегистрированные пользователи.
Войдите на сайт или Зарегистрируйтесь
© 2012-2017 «For-uCoz». Дизайн и верстка Snoopak Хостинг от uCoz