Как создать великолепный экран загрузки за 5 минут

1656655331 kak sozdat velikolepnyj ekran zagruzki za 5 minut

Во-первых, вот что мы будем строить. Установите таймер!

W4zbRnaocoYYCf1YLdaAsMdLXnfm7-Dhclyc
Вот ДЕМО, которое мы создадим.

Это смотрится знакомым?

Если да, то это потому, что вы где-то это видели – Slack!

Давайте научимся несколько вещей, воспроизведя это только с помощью CSS и немного старого доброго HTML.

Если вы в восторге от написания кода, зайдите на Codepen и создайте новое перо.

А теперь пойдем!

1. Разметка

Для этого нужна разметка достаточно проста. Вот:

<section class="loading">
For new sidebar colors, click your workspace name, then     Preferences > Sidebar > Theme
<span class="loading__author"> - Your friends at Slack</span>;    <span class="loading__anim"></span>
</section>

Просто, а?

Если вы не уверены, почему в названиях классов есть странные тире, я объяснил причину этого в этой статье.

Есть куча текста и a .loading__anim span, чтобы «имитировать» анимированный значок.

Результатом этого является обычный вид ниже.

QVYp5Lz5g0YvKYbO1Stn2RQ9EjziWauo0a1r
Не так уж плохо, правда?

2. Центрируйте содержимое

Результат не самый лучший из всех, что можно увидеть. Давайте все .loadingэлемент раздела, введенный на странице.

body {  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;}
3XoIKO5ikLjWJdBaJa2S0lgf25W3djMnLsJV
Теперь по центру!

Выглядишь лучше?

3. Стилизируйте текст загрузки.

Я знаю. В скором времени мы перейдем к анимации. А пока давайте стилизуем .loading чтобы текст выглядел гораздо лучше.

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

4. Стилизируйте авторский текст, чтобы он выглядел несколько иначе.

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

Вот так!

z6mbVcXOJZ0gBMogVez923ylx5Bqmjbkegsm

5. Создайте анимированный загрузчик

Долгожданный шаг здесь. Это будет самый длинный из шагов, потому что я уделю немного времени, чтобы убедиться, что вы понимаете, как это работает.

Если вы застряли, напишите комментарий и я с радостью помогу.

Эй, посмотри на погрузчик снова.

3HiHd00VoFzzTMjo80NwZP6M3FTmFcgnZlRr

Вы заметите, что половина его штриха синяя, а вторая – серая. Ладно, все решено. Кроме того, HTML элементы не округлены по умолчанию. Все есть a коробка элемент. Первым настоящим вызовом будет то, как дать .loading__anim полуграницы элемента.

Не беспокойтесь, если вы еще этого не понимаете. Я вернусь к этому.

Для начала разберемся с размерами погрузчика.

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

Прямо сейчас загрузчик находится в той же строке, что и текст. Это потому, что это а span элемент, который бывает an 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);  }

Это даст a сероватый 5px предел вокруг элемента.

Вот результат этого.

hc9QIUgPfSH6F0T7xggQ8FD93L2S-hoXDsiZ
Вы видите серые рамки, верно?

Пока не очень хорошо. Давайте сделаем это еще лучше.

Элемент имеет четыре стороны, top, bottom,leftи right

The 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 стороны будут иметь a голубой цвет для их границ. Вот результат этого:

T67pvUHFrwm8ngqtjDpRQlnsTsv5F8m-tYGE
хмммм. смотрится хорошо.

Мы куда-нибудь приезжаем!

Погрузчик круглый, не прямоугольный. Давайте изменим это, предоставив .loader__anim элемент а border-radius с 50%

Теперь мы имеем это:

-ivf-cy5qBLeR63-BgXvQinQN1-hCHLnKHzm

Не так уж плохо, правда?

Последним шагом является анимация этого.

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

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

И применить это так:

animation: rotate 600ms infinite linear;

Ой! Мы сделали это. Это все имеет смысл?

Кстати, смотрите результат ниже:

pIrqjvWR4GWuXlRnDP74790SedXbHTQvtyO3
lo hicimos! (испанский)

Очень круто, а?

Если какой-то шаг вас смутил, оставьте комментарий, и я с радостью помогу.

Готовы стать профессионалом?

Я создал бесплатное руководство по CSS, чтобы немедленно развить ваши навыки CSS. Получите бесплатную электронную книгу.

CguQzx6sEQ6HhauYMmL8b2Ekf-AvJgqlwZ2b
Семь секретов CSS, о которых вы не знали

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *