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'); //для смены цвета нужно поменять класс с red на blue, yellow, green. А также black можно поменять на write
  </script>
  • 15.01.2025
  • 101
  • 0
  • 3
    Голосов
  • Источник
uCoz, Preloader.js, загрузка страницы, как на YouTube, js. Скрипт

Смотрите также:

01
Картинка к материалу.
Убираем запятые и квадратные скобки, скрипт для ucoz
02
Картинка к материалу.
Создаем интерактивные вкладки на JavaScript: простой и понятный гайд
03
Картинка к материалу.
Создадим простое модальное окно с помощью jQuery
04
Картинка к материалу.
Автоматическое повышение репутации за материал в Каталоге файлов

Комментарии

Минимальная длина комментария - 50 знаков. комментарии модерируются
HTMLSTART » CSS3 - JS - SVG Примеры » Прочие скрипты для сайтов » Preloader.js – загрузка страницы как на YouTube