» »

Создать загрузку страницы сайта как на YouTube


Создать загрузку страницы сайта как на YouTube

Думаю вы все знаете как загружается страница на 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>


После установки вы можете теперь удивить своего пользователя.
05.09.2016 Загрузок: 2 Просмотров: 533 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
Сопрано
Сопрано 05.09.2016 00:571
+1
Видел такое на одном сайте, даже искал скрипт одно время, чтоб тоже поставить, так интересная загрузка, точно как на ютую.
FeStemBer
FeStemBer 05.09.2016 01:012
0
Можно просто перейти на Яндекс браузер, и у вас на каждой странице любого сайта будет точно такой же Preloader, хотя там немного шустрей.
tsakonter
tsakonter 05.09.2016 01:043
0
Можно на время поставить, просто если есть на одном сайте, то что то новое нужно сделать.
Kosten
Kosten 05.09.2016 01:064
0
Го так как помню красным цветом, как то же делают в другой оттенок, не зря же стили еще прицепом идут.
ucozmental
ucozmental 05.09.2016 01:105
0
Поставил на сайт, так на темном смотрится нормально, но там стрелка красным цветом. Думаю и на светлом будет видна, она также быстро грузит, пока оставлю или сдела. другой цвет и по шире.
Webmaster32
Webmaster32 05.09.2016 01:566
+1
Код
.preloader {  
  position: fixed;
  z-index: 100;
  top: 0;
  left: -6px;
  width: 1%;
  height: 3px;
  background: rgb(255, 0, 0);
  border-radius: 1px;  
  transition: width 500ms ease-out,opacity 400ms linear;
}


background: rgb(255, 0, 0); строка изменения цвета (сейчас выставлен красный)
Kosten
Kosten 05.09.2016 02:267
0
Webmaster32, спасибо, чтоб не искали, здесь все понятно на какую гамму цвета перевести.
avatar