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

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

Ето DEMO, което ще изградим.

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

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

Нека научим няколко неща, като пресъздадем това само с CSS и някои добри ol 'HTML.

Ако се вълнувате от писането на някакъв код, влезте в Codepen и създайте нова писалка.

Сега, да тръгваме!

1. Маркировката

Необходимата за това маркировка е съвсем проста. Ето го:

<раздел клас = "зареждане">
За нови цветове на страничната лента щракнете върху името на работното пространство, след това Предпочитания> Странична лента> Тема
 - Вашите приятели в Slack 
     

Просто, а?

Ако не сте сигурни защо имената на класовете имат странни тирета, обясних причината за това в тази статия.

Има куп текст и разтоварващ__анмид, за да „представите“ анимираната икона.

Резултатът от това е простият изглед по-долу.

Не е толкова лошо, а?

2. Центрирайте Съдържанието

Резултатът не е най-красивият материал за гледане. Нека на сайта да бъде въведен целият .loadingsection елемент.

тяло {
  дисплей: гъвкав;
  обосновка-съдържание: център;
  подравняване-елементи: център;
  минимална височина: 100vh;
}
Сега центрирано!

Търсите по-добре?

3. Стилизирайте текста за зареждане

Знам. Ще стигнем скоро до анимираните неща. За сега нека стилизираме текста за зареждане, за да изглежда много по-добре.

.Зареждане {
  максимална ширина: 50%;
  линия-височина: 1.4;
  размер на шрифта: 1.2rem;
  шрифт: удебелен шрифт;
  подравняване на текст: център;
}

4. Стилизирайте текста на автора така, че да изглежда малко по-различно.

.loading__author {
  тегло на шрифта: нормално;
  размер на шрифта: 0.9rem;
  цвят: rgba (189,189,189, 1);
  марж: 0.6rem 0 2rem 0;
  дисплей: блок;
}

Ето!

5. Създайте анимирания товарач

Много очакваната стъпка е тук. Това ще бъде най-дългата стъпка, защото ще отделя известно време, за да се уверите, че разбирате как работи.

Ако се забиете, пуснете коментар и ще се радвам да ви помогна.

Ей, погледнете отново товарача.

Ще забележите, че половината от нейния ход е синя, а другата половина - сива. Добре, това е решено. Също така HTML елементите не са закръглени по подразбиране. Всичко е елемент на кутията. Първото истинско предизвикателство ще бъде как да се даде на .loading__anim елемент половин граници.

Не се притеснявайте, ако още не сте разбрали това. Ще се върна към него.

Първо, да разберем размерите на товарача.

.loading__anim {
  ширина: 35px;
  височина: 35px;
 }

В момента товарачът е на същия ред като текста. Това е така, защото това е педя елемент, който се случва като HTML вграден елемент.

Нека се уверим, че товарачът е разположен на друга линия, тоест започва на друга линия, за разлика от поведението по подразбиране на вградените елементи.

.loading__anim {
   ширина: 35px;
   височина: 35px;
   дисплей: вграден блок;
  }

И накрая, нека се уверим, че товарачът е зададен границата.

.loading__anim {
   ширина: 35px;
   височина: 35px;
   дисплей: вграден блок;
   граница: 5px твърда rgba (189,189,189, 0,25);
  }

Това ще даде сивкава 5px рамка около елемента.

Ето сега е резултатът от това.

Виждате сивите граници, нали?

Не е толкова страхотно - все още. Нека да направим това още по-добре.

Елементът има четири страни, отгоре, отдолу, отляво и отдясно

Декларацията за граница, която зададохме по-рано, беше приложена към всички страни на елемента.

За да създадем товарача, се нуждаем от две страни на елемента, за да имаме различни цветове.

Няма значение кои страни сте избрали. Използвал съм горната и лявата страна отдолу

.loading__anim {
  ширина: 35px;
  височина: 35px;
  дисплей: вграден блок;
  граница: 5px твърда rgba (189,189,189, 0,25);
  гранично-ляв цвят: rgba (3,155,229, 1);
  бордюрен цвят: rgba (3,155,229, 1);
  }

Сега лявата и горната страна ще имат синкав цвят за техните граници. Ето резултата от това:

Хмммм. изглежда добре.

Стигаме някъде!

Товарът е кръгъл, НЕ правоъгълен. Да променим това, като дадем на .loader__anim елемент радиус на границата от 50%

Сега имаме това:

Не е толкова лошо, а?

Последната стъпка е да оживим това.

@keyframes се завърта {
 да се {
  трансформация: завъртане (1 завъртане)
 }
}

Да се ​​надяваме, че имате представа как работят CSS анимациите. 1 завъртане е равно на 360deg, тоест пълен завой се завърта на 360 градуса.

И го приложете така:

анимация: завъртане на 600ms безкрайно линейно;

Йо! Успяхме. Всичко това има ли смисъл?

Между другото, вижте резултата по-долу:

lo hicimos! (Испански)

Доста готин, а?

Ако някоя от стъпките ви обърка, пуснете коментар и ще се радвам да ви помогна.

Готови ли сте да станете Pro?

Създадох безплатно ръководство за CSS, за да получа вашите CSS умения пламващи веднага. Вземете безплатната електронна книга.

Седем CSS тайни, за които не сте знаели