Как да изградите възхитителен зареждащ екран за 5 минути

Първо, ето какво ще изградим. Задайте таймера си!

Изглежда ли ви познато?

Ако отговорът е да, това е, защото сте го виждали някъде - Slack!

Нека научим няколко неща, като пресъздадем това само с CSS и някои добри OL '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декларацията си поставяме по-рано се прилага за всички страни на елемента.

To create the loader, we need two sides of the element to have different colors.

It doesn’t matter what sides you choose. I have used the top and left sides below

.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); }

Now, the left and top sides will have a blueish color for their borders. Here’s the result of that:

We’re getting somewhere!

The loader is round, NOT rectangular. Let’s change this by giving the .loader__anim element a border-radius of 50%

Now we have this:

Not so bad, huh?

The final step is to animate this.

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

Hopefully, you have an idea of how CSS animations work. 1turn is equal to 360deg , that is a complete turn rotates 360 degrees.

And apply it like this:

animation: rotate 600ms infinite linear;

Yo! We did it. Does that all make sense?

By the way, see the result below:

Pretty cool, huh?

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.