Добавляем на сайт лоадер

Loader – это иконка-спиннер, которая крутится, пока загружается ваша страница. Так то я против таких лоадеров, потому что из-за них кажется, что страница загружается дольше, и она отображается полностью только после загрузки всего контента и всех скриптов. Лоадер нужен для страниц, на которых контент перестраивается скриптами, то есть, вы не увидите нормальный вид страницы, пока всё не загрузится, тогда то лучше, чтобы был лоадер и показывал пользователю уже готовую страницу. Если же Ваш контент нормально отображается и нет необходимости ждать загрузки всех скриптов, тогда отказавшись от лоадера, вы визуально ускорите скорость загрузки сайта в два раза.

Простой лоадер с gif-картинкой

HTML

HTML-код ставим внутри тега body, и если сайт большой с большим количеством контента, стилей и скриптов, тогда лучше ставить данный код выше.

<div class="loader">
  <div class="loader_inner"></div>
</div>

CSS

html.js .loader {
  background: none repeat scroll 0 0 #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 9999; 
}
html.js .loader .loader_inner {
  background-image: url("../img/preloader.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #fff;
  height: 60px;
  width: 60px;
  margin-top: -30px;
  margin-left: -30px;
  left: 50%;
  top: 50%;
  position: absolute; 
}

JS

$(window).load(function() {

  $(".loader_inner").fadeOut();
  $(".loader").delay(400).fadeOut("slow");

});

Preloader

Используется такая картинка с размерами 128*128, но в CSS мы зададим ей размеры 60*60

Больше красивых лоадеров-картинок можно скачать здесь https://pixelbuddha.net/freebie/flat-preloaders.

Выглядеть это будет так:

See the Pen Loader with img by Denis (@deniscreative) on CodePen.0

Простой лоадер без картинки

Изменяется только CSS, но для полноты картины добавлю все части:

HTML

<div class="loader">
  <div class="loader_inner"></div>
</div>

CSS

html.js .loader {
  background: none repeat scroll 0 0 #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;
}
html.js .loader .loader_inner {
  animation: animate 1.5s linear infinite;
  clip: rect(0, 80px, 80px, 40px); 
  height: 80px;
  width: 80px;
  position: absolute;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
}
@keyframes animate {
  0% { 
    transform: rotate(0deg)
  }
  100% { 
    transform: rotate(220deg)
  }
}
html.js .loader .loader_inner:after {
  animation: animate2 1.5s ease-in-out infinite;
  clip: rect(0, 80px, 80px, 40px);
  content:'';
  border-radius: 50%; 
  height: 80px;
  width: 80px;
  position: absolute; 
} 
@keyframes animate2 {
  0% {
    box-shadow: inset #b3dfd8 0 0 0 17px;
    transform: rotate(-140deg);
  }
  50% {
    box-shadow: inset #b3dfd8 0 0 0 2px;
  }
  100% {
    box-shadow: inset #b3dfd8 0 0 0 17px;
    transform: rotate(140deg);
  }
}

JS

$(window).load(function() {

  $(".loader_inner").fadeOut();
  $(".loader").delay(400).fadeOut("slow");

});

Больше CSS-спиннеров можно поискать здесь https://icons8.com/cssload/ru и здесь https://codepen.io/collection/HtAne/.

Выглядеть это будет так:

See the Pen Loader for site without img by Denis (@deniscreative) on CodePen.0