Як створити чудовий завантажувальний екран за 5 хвилин

По-перше, ось що ми побудуємо. Встановіть свій таймер!

Це виглядає знайомим?

Якщо так, це тому, що ви десь це бачили - Слак!

Давайте вивчимо кілька речей, відтворивши це лише за допомогою CSS та декількох хороших старих HTML.

Якщо ви захоплені написанням коду, зайдіть на Codepen і створіть нову ручку.

А тепер їдемо!

1. Розмітка

Розмітка, необхідна для цього, досить проста. Ось:

For new sidebar colors, click your workspace name, then Preferences > Sidebar > Theme
 - Your friends at Slack; 

Просто, так?

Якщо ви не впевнені, чому назви класів мають дивні тире, я пояснив причину цього в цій статті.

Є купа тексту та .loading__animпроміжок часу, щоб «видавати себе за анімований значок».

Результатом цього є простий погляд нижче.

2. Відцентруйте вміст

Результат - це не найкрасивіші речі. Давайте введемо на сторінці весь .loadingелемент розділу.

body { display: flex; justify-content: center; align-items: center; min-height: 100vh;}

Виглядаєш краще?

3. Стиль тексту завантаження

Я знаю. Незабаром ми перейдемо до анімаційних матеріалів. Поки що давайте стилізуємо .loadingтекст, щоб виглядати набагато краще.

.loading { max-width: 50%; line-height: 1.4; font-size: 1.2rem; font-weight: bold; text-align: center;}

4. Стиль авторського тексту має виглядати дещо інакше.

.loading__author { font-weight: normal; font-size: 0.9rem; color: rgba(189,189,189 ,1); margin: 0.6rem 0 2rem 0; display: block;}

Ось так!

5. Створіть анімований завантажувач

Тут довгоочікуваний крок. Це буде найдовший крок, тому що я витрачу трохи часу, щоб переконатися, що ви розумієте, як це працює.

Якщо ви застрягли, залиште коментар, і я із задоволенням допоможу.

Гей, ще раз подивись навантажувач.

Ви помітите, що половина його штриха синя, а друга половина сіра. Гаразд, це розібралось. Крім того, HTMLелементи не округляються за замовчуванням. Все є елементом коробки . Першим справжнім викликом буде те, як надати .loading__animелементу півмежі.

Не хвилюйтеся, якщо ви ще цього не розумієте. Я до цього повернусь.

Спочатку давайте розберемося з габаритами навантажувача.

.loading__anim { width: 35px; height: 35px; }

Зараз завантажувач знаходиться в тому ж рядку, що і текст. Це тому, що це spanелемент, який буває HTMLвбудованим елементом.

Давайте переконаємось, що навантажувач сидить на іншій лінії, тобто він починається на іншій лінії, на відміну від поведінки inlineелементів за замовчуванням .

.loading__anim { width: 35px; height: 35px; display: inline-block; }

Нарешті, давайте переконаймося, що у завантажувача встановлено якісь межі.

.loading__anim { width: 35px; height: 35px; display: inline-block; border: 5px solid rgba(189,189,189 ,0.25); }

Це дасть сірувату5px межу навколо елемента.

Ось результат цього.

Не настільки чудово - поки. Давайте зробимо це ще кращим.

Елемент має чотири сторони, top, bottom, left, іright

borderДекларації ми встановили раніше була застосована до всіх сторін елемента.

Для створення навантажувача нам потрібні дві сторони елемента, щоб мати різні кольори.

Не має значення, які сторони ви виберете. Я використав topі leftсторони нижче

.loading__anim { width: 35px; height: 35px; display: inline-block; border: 5px solid rgba(189,189,189 ,0.25); border-left-color: rgba(3,155,229 ,1); border-top-color: rgba(3,155,229 ,1); }

Тепер боки leftта topбоки матимуть блакитний колір для своїх меж. Ось результат цього:

Ми кудись дістаємось!

Навантажувач круглий, а НЕ прямокутний. Зміна Давайте це, даючи .loader__animелемент а border-radiusз50%

Тепер ми маємо таке:

Не так вже й погано, так?

Останній крок - оживити це.

@keyframes rotate { to { transform: rotate(1turn) }}

Сподіваємось, ви маєте уявлення про те, як працюють анімації CSS. 1turnдорівнює 360deg, тобто повний поворот обертається на 360 градусів.

І застосувати це так:

animation: rotate 600ms infinite linear;

Йо! Ми це зробили. Чи все це має сенс?

До речі, див. Результат нижче:

Дуже круто, так?

If any of the steps confused you, drop a comment and I’ll be happy to help.

Ready to become Pro?

I have created a free CSS guide to get your CSS skills blazing, immediately. Get the free ebook.