Loader – это иконка-спиннер, которая крутится, пока загружается ваша страница. Так то я против таких лоадеров, потому что из-за них кажется, что страница загружается дольше, и она отображается полностью только после загрузки всего контента и всех скриптов. Лоадер нужен для страниц, на которых контент перестраивается скриптами, то есть, вы не увидите нормальный вид страницы, пока всё не загрузится, тогда то лучше, чтобы был лоадер и показывал пользователю уже готовую страницу. Если же Ваш контент нормально отображается и нет необходимости ждать загрузки всех скриптов, тогда отказавшись от лоадера, вы визуально ускорите скорость загрузки сайта в два раза.
Простой лоадер с gif-картинкой
HTML
HTML-код ставим внутри тега body, и если сайт большой с большим количеством контента, стилей и скриптов, тогда лучше ставить данный код выше
<div class="loader">
<div class="loader_inner"></div>
</div>
CSS
.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;
}
.loader .loader_inner {
background-image: url("../images/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
Не забываем подключить библиотеку jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
Код внутри файла скриптов script.js:
$(window).on("load", function() {
$(".loader_inner").fadeOut();
$(".loader").delay(400).fadeOut("slow");
});
Preloader
Используется такая картинка с размерами 128*128, но в CSS мы зададим ей размеры 60*60
Больше красивых лоадеров-картинок можно скачать здесь https://pixelbuddha.net/freebie/flat-preloaders.
Выглядеть это будет так:
0
Простой лоадер без картинки
Изменяется только CSS, но для полноты картины добавлю все части:
HTML
<div class="loader">
<div class="loader_inner"></div>
</div>
CSS
.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;
}
.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)
}
}
.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
Не забываем подключить библиотеку jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
Код внутри файла скриптов script.js:
$(window).on("load", function() {
$(".loader_inner").fadeOut();
$(".loader").delay(400).fadeOut("slow");
});
Больше CSS-спиннеров можно поискать здесь https://icons8.com/cssload/ru и здесь https://codepen.io/collection/HtAne/.
Выглядеть это будет так:
0