Прелоадер на сайт, с процентной загрузкой
На этом сайте уже есть две статьи о том как сделать прелоадер, здесь мы рассматриваем стилизацию прелоадера с помошью css, а здесь уже рассматриваем как его заставить пропасть когда сайт уже полностью загрузился, а именно логику работы на js/jquery.
На некоторых сайтах, помимо простых лоадеров, используют и процентные, обычно когда загрузка доходит до 100%, то он пропадает, а как его сделать вы узнаете в этой статье.
Просмотреть реализацию в YouTube
HTML – структура прелоадера
Для начала необходимо создать вот такую базовую структуру в своем html документе:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Loader</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="font" href="https://fonts.googleapis.com/css2?family=Syne:wght@800&display=preload"
rel="stylesheet" crossorigin>
<link rel="stylesheet" href="style/normalize.css">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<!-- div .wrapp -->
<div class="wrapp">
<div class="preloader">
<div class="preloader__bg"></div>
<div class="preloader__percent">
<span class="preloader__num">0</span>
<span>%</span>
</div>
</div>
<!-- header .header -->
<header class="header">
<h1>Loader Ready</h1>
<p>scroll</p>
</header>
<!-- header .header END -->
<!-- main .main -->
<main class="main">
<!-- section .section -->
<section class="section">
<div class="content">
<h2>Section img</h2>
<div class="section__img">
<div class="section__img-item">
<img src="img/1.jpg" alt="1">
</div>
<div class="section__img-item">
<img src="img/2.jpg" alt="2">
</div>
<div class="section__img-item">
<img src="img/3.jpg" alt="3">
</div>
<div class="section__img-item">
<img src="img/4.jpg" alt="4">
</div>
<div class="section__img-item">
<img src="img/5.jpg" alt="5">
</div>
<div class="section__img-item">
<img src="img/6.jpg" alt="6">
</div>
<div class="section__img-item">
<img src="img/7.jpg" alt="7">
</div>
<div class="section__img-item">
<img src="img/8.jpg" alt="8">
</div>
</div>
</div>
</section>
<!-- section .section END -->
</main>
<!-- main .main END -->
</div>
<!-- /div .wrapp END -->
<!-- script -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/js.js"></script>
<!-- script END -->
</body>
</html>
На данном этапе, сайт выглядит вот таким образом:
Здесь необходимо обратить внимание на два блока, первый имеет класс «preloader__bg», второй называется «preloader__num», для чего они нужны будет написано ниже, а в самом низу подключаем библиотеку «jquery» и файл «js.js» в котором позже будет описана логика работы прелоадера. В написанном выше коде вы также могли заметить картинки, а все потому что зачастую процентные прелоадеры исспользуют на сайтах в которых присутствует большое количество изображений.
Стилизация прелоадера
Стилизация будет разделена на два этапа, первый это стилизация картинок, заголовка, текста, и второй этап – это стилизация самого прелоадера.
1. Стилизация контента
Ниже написан код для стилизации контента который пользователь будет видеть после исчезновения лоадера, на нем останавливаться не буду, потому что упор статьи идет на написание скрипта, поэтому просто скопируйте данный код себе в style.css:
/* general *******************************************/
/****************************************************/
:root {
--color-g: #000;
--color-s: #fff;
--font-family-s: 'Syne', sans-serif;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: var(--font-family-s);
margin: 0;
padding: 0;
}
.wrapp {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
z-index: 1;
}
.content {
max-width: 1430px;
width: 100%;
padding: 0 15px;
margin: 0 auto;
}
.header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
height: 100vh;
background: rgb(208, 208, 208);
}
.header h1 {
color: var(--color-g);
font-size: 70px;
}
.header p {
font-size: 30px;
}
.section {
padding: 70px 0;
}
h2 {
margin-bottom: 20px;
font-size: 50px;
}
.section__img {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 39px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.section__img-item {
width: 48%;
height: 300px;
overflow: hidden;
}
.section__img-item img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
После добавления стилей, контент имеет такой вид:
2. Стилизация прелоадера
Ниже написан код самого прелоадера, здесь уже разберем некоторые моменты подробнее:
/* loader *********************************/
/*****************************************/
.preloader {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgb(208, 208, 208);
will-change: transform;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
z-index: 9999;
}
.preloader.active {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.preloader__bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transform: translateX(calc(-100% + 0%));
-ms-transform: translateX(calc(-100% + 0%));
transform: translateX(calc(-100% + 0%));
background: #2F2F2F;
will-change: transform;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
z-index: 1;
}
.preloader__percent {
position: absolute;
top: 50%;
left: 50%;
color: var(--color-s);
font-size: 80px;
-webkit-font-feature-settings: 'pnum' on, 'lnum' on;
font-feature-settings: 'pnum' on, 'lnum' on;
mix-blend-mode: difference;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 2;
}
Класс «.preloader.active» говорит, что если к классу «.preloader» добавиться класс «.active», то ему нужно будет сдвинуться в верх, на всю его высоту, а блок с классом «.preloader__bg» по мере загрузки сайта будет сдвигаться с лева на право ровно на столько процентов, на сколько прогрузится сам сайт.
После добавления стилей прелоадер имеет вид:
-Когда сайт только что был открыт
-Когда сайт в процессе загрузки
Как устроен прелоадер, написание js кода
Выше мы написали стили, а теперь будем оживлять прелоадер.
Логика работы очень проста и заключается в том, что после того как все картинки на сайте полностью прогрузятся, прелоадер нужно скрыть. Ниже приведен js код с описанием:
$(function () {
'use strict';
function preloader() {
let preloader = $('.preloader'),//ищем прелоадер
imagesCount = $('img').length, //щитаем количество картинок на сайте
dBody = $('body'), //ищем боди что б после загрузки добаввить класс который позволит прокручивать сайт
percent = 100 / imagesCount,//записываем формулу для перевода количества картинок в проценты
progress = 0,//переменная которая указывает на то, на сколько процентов был загружен сайт
loadedImg = 0;//количество загруженных картинок
//это условие выполниться в том случае, если на сайте есть картинки, если картинок нет, то прелоадер нужно скрыть
if (imagesCount > 0) {
dBody.css('overflow', 'hidden');
//цыкл пробегается по всем картинкам и создает фантом, как только фантом был загружен, вызывается функция
for (let i = 0; i < imagesCount; i++) {
let imgCopy = new Image();
imgCopy.src = document.images[i].src;
//после загрузки фантома вызывается функция
imgCopy.onload = imgLoad;
imgCopy.onerror = imgLoad;
}
//функция которая обновляется после каждой загрузки фантома картинки
function imgLoad() {
progress += percent;
loadedImg++;
//условие которое срабатывает после загрузки всех фантомов картинок
if (progress >= 100 || loadedImg == imagesCount) {
//пишем код, что бы наш фон плавно двигался слева на право
$('.preloader__bg').css('transform', 'translateX(calc(-100% + ' + progress + '%))');
//пишем код, что бы изменялись цифры процентов
$('.preloader__num').html(progress);
setTimeout(function () {
//скрываем сам прелоадер
preloader.addClass("active");
//добавляем возможность скролить сайт
dBody.css('overflow', '');
setTimeout(function () {
//избавляемся от невидимого прелоадера и не нужного кода
preloader.remove();
}, 1000);
}, 800);
}
}
} else {
//если нет каритнок на сайте, то скрываем прелоадер
preloader.remove();
}
}
preloader();
});
Просмотреть реализацию в YouTube
Посмотреть готовый результат можно в CodePen.
Посмотреть весь код можно на GitHub.
Вот таким способом был реализован процентный прелоадер.
Прочитав статью не забывайте подписаться на новости блога, чтобы не пропускать новые, еще более интересные статьи!
Также подписывайтесь на мой instagram и telegram, там вы сможете найти много полезной информации.
комментарии (0)
написать комментарийкомментариев нет