Прелоадер для сайта на CSS и jQuery

Привет, ребята! В этом материале вы узнаете как сделать прелоадер для сайта с использованием CSS и jQuery. Он нужен в тех случаях, когда скорость загрузки вашего сайта оставляет желать лучшего. Мы не будем заморачиваться с GIF картинками, а напишем preloader на чистом CSS. И реализуем вариант, который применяется на Яндекс метрике при загрузке данных с сервера. И давайте сразу перейдем к примеру. Но для того, чтобы увидеть предзагрузчик, нужно понизить скорость соединения, так как данных на странице слишком мало и она грузится моментально. В хроме жмите F12 — вкладка Network и выберите низкую скорость (Slow 3G), так же установите галочку: Disable cach.

Демо

Создаем красивый прелоадер на CSS

Перед этим создадим слой, который будет перекрывать содержимое HTML документа, пока все не загрузилось до конца. Его желательно установить сразу после открывающего тега body. А после него уже сам прелоадер.

<div class="overlay"></div> // overlay
<div class="preloader"></div> // preloader

CSS код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    background: #333;
    top: 0;
}
.preloader{
    width: 50px;
    height: 50px;
    border: 6px solid transparent;
    border-bottom: 6px solid #fc0 ;
    border-left: 6px solid #fc0 ;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: animate 1s infinite linear;
}
/* Анимируем наш прелоадер */
@keyframes animate{
	0%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(360deg);
	}
}

Скрипт

1
2
3
4
5

<script>
$(document).ready(function() {
  $('.preloader, .overlay').fadeOut();
});
</script>

Тут мы говорим, что когда документ будет полностью загружен, то прелоадер и слой перекрытия скроется из вида. Это можно сделать и на чистом JS, но что-то мне подсказывает, что в современном вебе его мало кто использует. Но если очень нужно — пишите об этом в комментах. Теперь у нас есть готовый и очень простой прелоадер для сайта и даже не пришлось искать для этого генераторы? а обошлись всего лишь CSS и jQuery. Поставить можно на Joomla, WordPress, Bitrix и любые другие CMS.