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__anim
interval 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 .loading
sektionselementet 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 .loading
indtil 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 HTML
er elementer ikke afrundet som standard. Alt er et kasseelement . Den første rigtige udfordring vil være, hvordan man giver .loading__anim
elementet 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 span
element, der tilfældigvis er et HTML
inline- 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 inline
elementernes 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 border
erklæ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 top
og left
siderne 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 left
og top
vil 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__anim
elementet et border-radius
af50%
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. 1turn
er 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.
