Sådan opbygges en dejlig indlæsningsskærm på 5 minutter

For det første er her, hvad vi vil bygge. Indstil din timer!

Ser det velkendt ud?

Hvis ja, det er fordi du har set dette et eller andet sted - Slack!

Lad os lære et par ting ved at genskabe dette med bare CSS og noget godt ol 'HTML.

Hvis du er begejstret for at skrive noget kode, skal du gå på Codepen og oprette en ny pen.

Lad os nu gå!

1. Markup

Den krævede markering til dette er ret enkel. Her er det:

For new sidebar colors, click your workspace name, then Preferences > Sidebar > Theme

 - Your friends at Slack; 

Enkelt, ikke?

Hvis du ikke er sikker på, hvorfor klassens navne har underlige bindestreger, forklarede jeg årsagen bag det i denne artikel.

Der er en masse tekst og et .loading__animinterval til at "efterligne" det animerede ikon.

Resultatet af dette er den enkle opfattelse nedenfor.

2. Centrer indholdet

Resultatet er ikke det smukkeste at se. Lad os få hele .loadingsektionselementet indtastet på siden.

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

Ser du bedre ud?

3. Stil indlæsningsteksten

Jeg ved. Vi kommer snart til de animerede ting. Lad os .loadingindtil nu style teksten, så den ser meget bedre ud.

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

4. Stil forfatterteksten, så den ser lidt anderledes ud.

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

Værsgo!

5. Opret den animerede læsser

Det meget forventede trin er her. Dette bliver den længste af trinnene, fordi jeg bruger lidt tid på at sikre dig, at du forstår, hvordan det fungerer.

Hvis du sidder fast, skal du sende en kommentar, så hjælper jeg gerne.

Hej, kig på læsseren igen.

Du vil bemærke, at halvdelen af ​​slagtilfælde er blå, og den anden halvdel er grå. Okay, det er ordnet. Desuden HTMLer elementer ikke afrundet som standard. Alt er et kasseelement . Den første rigtige udfordring vil være, hvordan man giver .loading__animelementet halve grænser.

Bare rolig, hvis du ikke forstår dette endnu. Jeg kommer tilbage til det.

Lad os først sortere læsserens dimensioner.

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

Lige nu er læsseren på samme linje som teksten. Det er fordi det er et spanelement, der tilfældigvis er et HTMLinline- element.

Lad os sørge for, at læsseren sidder på en anden linje, det vil sige, at den begynder på en anden linje i modsætning til inlineelementernes standardopførsel .

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

Lad os endelig sørge for, at læsseren har noget grænsesæt.

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

Dette giver en grålig5px grænse omkring elementet.

Nu, her er resultatet af det.

Ikke så stor - endnu. Lad os gøre dette endnu bedre.

Et element har fire sider, top, bottom, left, ogright

Den bordererklæring, vi satte tidligere blev anvendt på alle siderne af elementet.

For at oprette læsseren har vi brug for to sider af elementet for at have forskellige farver.

Det betyder ikke noget, hvilke sider du vælger. Jeg har brugt den topog leftsiderne nedenfor

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

Nu, de leftog topvil sider har en blålig farve til deres grænser. Her er resultatet af det:

Vi kommer et sted!

Læsseren er rund, IKKE rektangulær. Lad os ændre dette ved at give .loader__animelementet et border-radiusaf50%

Nu har vi dette:

Ikke så slemt, ikke?

Det sidste trin er at animere dette.

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

Forhåbentlig har du en idé om, hvordan CSS-animationer fungerer. 1turner lig med 360deg, det vil sige en komplet drejning drejer 360 grader.

Og anvend det således:

animation: rotate 600ms infinite linear;

Yo! Vi gjorde det. Er alt fornuftigt?

Forresten, se resultatet nedenfor:

Temmelig sejt, ikke?

Hvis nogle af trinnene forvirrede dig, skal du sende en kommentar, så hjælper jeg gerne.

Klar til at blive Pro?

Jeg har oprettet en gratis CSS-guide for straks at få dine CSS-færdigheder flammende. Få den gratis e-bog.