Як зробити прелоадер: покроковий спосіб додавання Preloader для сайту
Ми покажемо, як зробити прелоадер у вигляді анімації з появою на екрані під час завантаження. Такий спосіб показує користувачеві, що процес завантаження йде. Це може бути анімований елемент, який завантажується попередньо перед відображенням основного вмісту сайту.
Примітка! Прелоадери (Preloader) являють собою ключові елементи інтерфейсу користувача, які інформують відвідувачів про те, що сайт не відчуває збоїв, а знаходиться в процесі обробки даних.
Як додати прелоадер для сайту
Цей метод забезпечує швидке створення ефективного прелоадера, який значно покращить досвід користувача під час завантаження сторінки.
Крок 1. У файлі HTML створюються два div/a – контейнер для прелоадера та сам індикатор завантаження.
<div id="myPreloader" class="wrap-myLoader">
<div class="myLoader"></div>
</div>Крок 2. Налаштування стилів для блоку-обгортки прелоадера:
- розширення блоку our-Loader на весь екран;
- вибір кольору тла;
- установка z-index (щоб блок завжди залишався поверх інших елементів);
- налаштування прозорості та видимості, які пізніше можна буде змінити за допомогою JavaScript.
.wrap-myLoader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 51;
transition: 1s all;
opacity: 1;
visibility: visible;
}Крок 3. Для стилізації самого Prealoader ми центруємо його, задаємо ширину та висоту, фарбуємо сторони у білий колір, а одну сторону – у зелений. За допомогою властивості border-radius ми перетворюємо квадрат на коло. Також створюємо клас .done, який ми додамо до обгортки прелоадера після повного завантаження всіх елементів, щоб приховати індикатор завантаження.
.myLoader {
position: absolute;
left: 49%;
top: 49%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 6px solid #65a9ee;
border-top-color: #0C3C6C;
border-radius: 50%;
animation: 1s myAnim linear infinite;
}
.cansel {
opacity: 0;
visibility: hidden;
}Крок 4. Визначимо ключові кадри анімації.
@keyframes myAnim {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}Крок 5. Встановлюємо параметри анімації: тривалість – 1 секунда (тобто, від початкового до кінцевого стану коло буде пройдено за 1 секунду), швидкість анімації – рівномірна, повторення анімації – нескінченне.
animation: 1s myAnim linear infinite;Весь код на CSS:
.wrap-myLoader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 51;
transition: 1s all;
opacity: 1;
visibility: visible;
}
.myLoader {
position: absolute;
left: 49%;
top: 49%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 6px solid #65a9ee;
border-top-color: #0C3C6C;
border-radius: 50%;
animation: 1s myAnim linear infinite;
}
.cansel {
opacity: 0;
visibility: hidden;
}
@keyframes myAnim {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
JavaScript-код: після того, як сторінка повністю завантажиться, клас done буде доданий до елемента з ідентифікатором myPreloader, що приховає прелоадер. Також встановлюємо затримку у мілісекундах перед прихованням (наприклад, пів секунди).
document.body.onload = function() {
setTimeout(function() {
var preloader = document.getElementById("myPreloader");
if (!preloader.classList.contains("cansel")) {
preloader.classList.add("cansel");
}
}, 499)
};Дотримуючись цих простих кроків, ви зможете створити ефективний індикатор завантаження для вашого веб-сайту, використовуючи лише CSS без використання списків чи інших складних інструментів.
Натисніть щоб переглянути демо×
Зверніть увагу! Існують різні способи застосування принципів CSS. Наприклад, для створення плавних анімацій та ефектів на веб-сайті. Рекомендуємо статтю – «Анімація появи блоку за допомогою CSS».
Креативні приклади preloader
Миготливі по черзі кола
<div class="load_dotted"></div>
<style>
.load_dotted {
width: 15px;
aspect-ratio: 1;
border-radius: 50%;
animation: dotted 1s infinite linear alternate;
}
@keyframes dotted {
0% {box-shadow: 20px 0 #0C3C6C, -20px 0 #7dbeff;background: #0C3C6C }
33% {box-shadow: 20px 0 #0C3C6C, -20px 0 #7dbeff;background: #7dbeff}
66% {box-shadow: 20px 0 #7dbeff,-20px 0 #0C3C6C; background: #7dbeff}
100%{box-shadow: 20px 0 #7dbeff,-20px 0 #0C3C6C; background: #0C3C6C }
}
</style>Смуги, що крутяться
<div class="load_hoop"></div>
<style>
.load_hoop {
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
border: 8px solid #0000;
border-right-color: #0080ff97;
position: relative;
animation: hoop 1s infinite linear;
}
.load_hoop:before,
.load_hoop:after {
content: "";
position: absolute;
inset: -8px;
border-radius: 50%;
border: inherit;
animation: inherit;
animation-duration: 2s;
}
.load_hoop:after {
animation-duration: 4s;
}
@keyframes hoop {
100% {transform: rotate(1turn)}
}
</style>Коло, що підстрибує
<div class="load_jump"></div>
<style>
.load_jump {
width: 30px;
aspect-ratio: 1;
display: grid;
transform: translateY(100%);
}
.load_jump::before,
.load_jump::after {
content: "";
grid-area: 1/1;
border-radius: 50%;
transform-origin: bottom;
position: relative;
}
.load_jump::before {
background: radial-gradient(at 30% 30%,#0000,#000a) #65a9ee;
transform: scaleY(0.65);
top: 0;
animation: jump-1, jump-2;
animation-duration: 2s;
animation-timing-function: cubic-bezier(0,400,1,400),ease;
animation-iteration-count: infinite;
}
.load_jump::after {
background: #ccc;
filter: blur(8px);
transform: scaleY(0.3) translate(0px,0px);
left: 0;
animation: jump-3 2s cubic-bezier(0,400,1,400) infinite;
}
@keyframes jump-1 {
100% {top:-0.2px}
}
@keyframes jump-2 {
4%,96% {transform: scaleY(1)}
}
@keyframes jump-3 {
100% {transform: scaleY(0.3) translate(0.1px,-0.1px)}
}
</style>Крапка з імпульсом
<div class="load_pulse"></div>
<style>
.load_pulse {
width: 20px;
aspect-ratio: 1;
border-radius: 50%;
background: #0C3C6C;
box-shadow: 0 0 0 0 #0004;
animation: pulse 1s infinite;
}
@keyframes pulse {
100% {box-shadow: 0 0 0 30px #0000}
}
</style>Розкладний квадрат
<div class="load_square"></div>
<style>
.load_square {
width: 60px;
aspect-ratio: 1;
display: grid;
grid: 50%/50%;
color: #357cc4;
--_g: no-repeat linear-gradient(currentColor 0 0);
background: var(--_g),var(--_g),var(--_g);
background-size: 50.1% 50.1%;
animation:
square-0 1.5s infinite steps(1) alternate,
square-0-0 3s infinite steps(1);
}
.load_square::before {
content: "";
background: currentColor;
transform: perspective(150px) rotateY(0deg) rotateX(0deg);
transform-origin: bottom right;
animation: square-1 1.5s infinite linear alternate;
}
@keyframes square-0 {
0% {background-position: 0 100%,100% 100%,100% 0}
33% {background-position: 100% 100%,100% 100%,100% 0}
66% {background-position: 100% 0 ,100% 0 ,100% 0}
}
@keyframes square-0-0 {
0% {transform: scaleX(1) rotate(0deg)}
50% {transform: scaleX(-1) rotate(-90deg)}
}
@keyframes square-1 {
16.5%{transform:perspective(150px) rotateX(-90deg) rotateY(0deg) rotateX(0deg);filter:grayscale(0.8)}
33% {transform:perspective(150px) rotateX(-180deg) rotateY(0deg) rotateX(0deg)}
66% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg)}
100% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(0.8)}
}
</style>Кола, що зливаються
<div class="load_merger"></div>
<style>
.load_merger {
width: 120px;
height: 60px;
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
background: #fff;
filter: blur(5px) contrast(10) hue-rotate(60deg);
mix-blend-mode: darken;
}
.load_merger:before,
.load_merger:after {
content: "";
width: 40px;
border-radius: 50%;
background: #419ffc;
animation: merger 1s infinite alternate;
}
.load_merger:after {
--s:-1;
}
@keyframes merger{
90%,100% {transform: translate(calc(var(--s,1)*30px))}
}
</style>Не пропустите эти статьи
Як зробити адаптивне відео YouTube на CSS
Розглянемо кілька способів, як зробити адаптивне відео YouTube на CSS та помістити на сайт таким…
Блокова модель у CSS: висота блоку та пропорції
Блокова модель CSS (box model) застосовується до елементів, які розглядаються як блоки, визначаючи, як різні…
Висота блоку залежно від ширини: висота та пропорції на CSS
Висота блоку залежно від ширини визначається в різних одиницях CSS: дюймах (in), пікселях (px), пунктах…
Використовуємо CSS у створенні геометричних фігур: 13 прикладів нескладних форм
Одне з нововведень у CSS, що захоплює, це можливість використання меншої кількості зображень у веб-дизайні…