În primul rând, iată ce vom construi. Setați temporizatorul!

Cum sa construiesti un ecran de incarcare incantator in 5
Iată DEMO bine construit.

Arată acest lucru familiar?

Dacă da, asta pentru că ai văzut asta undeva – Slack!

Să învățăm câteva lucruri, recreând acest lucru doar cu CSS și niște coduri HTML bune.

Dacă sunteți încântați să scrieți un cod, continuați Codepen și creați un stilou nou.

Acum, să mergem!

1. Marcajul

Marcajul necesar pentru aceasta este destul de simplu. Iată-l:

<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>

Simplu, nu?

Dacă nu sunteți sigur de ce numele claselor au linii ciudate, am explicat motivul din spatele acestui lucru Acest articol.

Există o grămadă de text și un .loading__anim pentru a „identifica” pictograma animată.

Rezultatul este imaginea simplă de mai jos.

Cum sa construiesti un ecran de incarcare incantator in 5
Nu-i așa de rău, nu?

2. Centrează conținutul

Rezultatul nu este cel mai frumos lucru de văzut. Să avem întregul .loadingelement de secțiune introdus în pagină.

body {  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;}
1611956105 47 Cum sa construiesti un ecran de incarcare incantator in 5
Acum centrat!

Arăți mai bine?

3. Stilizați textul de încărcare

Stiu. Vom ajunge în curând la lucrurile animate. Deocamdată, să stilizăm .loading text pentru a arăta mult mai bine.

.loading {  max-width: 50%;  line-height: 1.4;  font-size: 1.2rem;  font-weight: bold;  text-align: center;}
1611956105 260 Cum sa construiesti un ecran de incarcare incantator in 5

4. Stilizați textul autorului pentru a arăta ușor diferit.

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

Gata!

1611956106 673 Cum sa construiesti un ecran de incarcare incantator in 5

5. Creați încărcătorul animat

Pasul mult așteptat este aici. Acesta va fi cel mai lung dintre pași, deoarece voi petrece ceva timp pentru a mă asigura că înțelegeți cum funcționează.

Dacă te blochezi, lasă un comentariu și te voi ajuta cu plăcere.

Hei, uită-te din nou la încărcător.

1611956106 963 Cum sa construiesti un ecran de incarcare incantator in 5

Veți observa că jumătate din cursa sa este albastră și cealaltă jumătate este gri. Bine, asta este rezolvat. De asemenea, HTML elementele nu sunt rotunjite în mod implicit. Totul este un cutie element. Prima provocare reală va fi cum să oferiți .loading__anim element jumătate de margini.

Nu vă faceți griji dacă nu înțelegeți încă acest lucru. Voi reveni la asta.

În primul rând, să sortăm dimensiunile încărcătorului.

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

În acest moment, încărcătorul se află pe aceeași linie cu textul. Asta pentru că este un span element care se întâmplă să fie un HTML in linie element.

Să ne asigurăm că încărcătorul se așează pe o altă linie, adică începe pe o altă linie, spre deosebire de comportamentul implicit al inline elemente.

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

În cele din urmă, să ne asigurăm că încărcătorul are niște margini setate.

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

Acest lucru va da o gri 5px marginea în jurul elementului.

Iată rezultatul.

1611956106 236 Cum sa construiesti un ecran de incarcare incantator in 5
Vezi marginile gri, nu?

Nu atât de grozav – încă. Să îmbunătățim acest lucru.

Un element are patru laturi, top, bottom,left, și right

border declarația pe care am stabilit-o mai devreme a fost aplicată tuturor părților elementului.

Pentru a crea încărcătorul, avem nevoie de două fețe ale elementului pentru a avea culori diferite.

Nu contează ce părți alegeți. Am folosit top și left laturile de dedesubt

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

Acum left și top părțile vor avea o albăstrui culoare pentru granițele lor. Iată rezultatul:

1611956107 656 Cum sa construiesti un ecran de incarcare incantator in 5
hmmmm. Arată bine.

Ajungem undeva!

Încărcătorul este rotund, NU dreptunghiular. Să schimbăm acest lucru oferind .loader__anim elementul a border-radius de 50%

Acum avem acest lucru:

1611956107 816 Cum sa construiesti un ecran de incarcare incantator in 5

Nu-i așa de rău, nu?

Ultimul pas este să animați acest lucru.

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

Să sperăm că ai o idee despre cum Animații CSS muncă. 1turn este egal cu 360deg , adică o rotire completă se rotește cu 360 de grade.

Și aplicați-l astfel:

animation: rotate 600ms infinite linear;

Eu! Am reusit. Are totul sens?

Apropo, vezi rezultatul de mai jos:

1611956107 845 Cum sa construiesti un ecran de incarcare incantator in 5
lo hicimos! (Spaniolă)

Destul de cool, nu?

Dacă vreunul dintre pași te-a încurcat, renunță la un comentariu și te voi ajuta cu plăcere.

Sunteți gata să deveniți Pro?

Am creat un ghid CSS gratuit pentru a vă dezvolta abilitățile CSS imediat. Obțineți cartea electronică gratuită.

1611956107 780 Cum sa construiesti un ecran de incarcare incantator in 5
Șapte secrete CSS despre care nu știați