Come costruire una deliziosa schermata di caricamento in 5 minuti

Innanzitutto, ecco cosa costruiremo. Imposta il tuo timer!

Ecco la DEMO che costruiremo.

Ti sembra familiare?

Se sì, è perché l'hai visto da qualche parte - Slack!

Impariamo alcune cose ricreando questo con solo CSS e qualche buon vecchio HTML.

Se sei entusiasta di scrivere del codice, vai su Codepen e crea una nuova penna.

Adesso andiamo!

1. Il markup

Il markup richiesto per questo è abbastanza semplice. Ecco qui:

Per i nuovi colori della barra laterale, fai clic sul nome dell'area di lavoro, quindi su Preferenze> Barra laterale> Tema
 - I tuoi amici su Slack 
     

Semplice, eh?

Se non sei sicuro del perché i nomi delle classi abbiano trattini strani, ho spiegato il motivo dietro questo in questo articolo.

C'è un sacco di testo e un intervallo .loading__anim per "impersonare" l'icona animata.

Il risultato di questo è la semplice vista qui sotto.

Non così male, eh?

2. Centrare il contenuto

Il risultato non è la cosa più bella da vedere. Abbiamo inserito l'intero elemento .loadingsection nella pagina.

body {
  display: flessibile;
  giustificare-contenuto: centro;
  align-items: center;
  altezza minima: 100 vh;
}
Ora centrato!

Stai meglio?

3. Dai uno stile al testo di caricamento

Lo so. Presto arriveremo alle cose animate. Per ora, modelliamo il testo .loading in modo che appaia molto meglio.

.Caricamento in corso {
  larghezza massima: 50%;
  altezza della linea: 1,4;
  dimensione carattere: 1,2rem;
  peso carattere: grassetto;
  text-align: center;
}

4. Modella il testo dell'autore in modo che appaia leggermente diverso.

.loading__author {
  peso carattere: normale;
  dimensione carattere: 0.9rem;
  colore: rgba (189.189.189, 1);
  margine: 0.6rem 0 2rem 0;
  blocco di visualizzazione;
}

Ecco qua!

5. Creare il caricatore animato

Il passo tanto atteso è qui. Questo sarà il più lungo dei passaggi, perché passerò un po 'di tempo per assicurarmi di capire come funziona.

Se rimani bloccato, lascia un commento e saremo felici di aiutarti.

Ehi, dai di nuovo un'occhiata al caricatore.

Noterai che metà del suo tratto è blu e l'altra metà è grigia. Va bene, è stato risolto. Inoltre, gli elementi HTML non sono arrotondati per impostazione predefinita. Tutto è un elemento scatolare. La prima vera sfida sarà come dare a mezzo bordo l'elemento .loading__anim.

Non preoccuparti se non lo capisci ancora. Ci tornerò.

Innanzitutto, riordiniamo le dimensioni del caricatore.

.loading__anim {
  larghezza: 35px;
  altezza: 35px;
 }

In questo momento, il caricatore si trova sulla stessa riga del testo. Questo perché si tratta di un elemento span che risulta essere un elemento inline HTML.

Assicuriamoci che il caricatore si inserisca su un'altra linea, ovvero inizi su un'altra linea rispetto al comportamento predefinito degli elementi in linea.

.loading__anim {
   larghezza: 35px;
   altezza: 35px;
   display: blocco in linea;
  }

Infine, assicuriamoci che il caricatore abbia un bordo impostato.

.loading__anim {
   larghezza: 35px;
   altezza: 35px;
   display: blocco in linea;
   bordo: 5px solido rgba (189.189.189, 0,25);
  }

Questo darà un bordo grigio 5px attorno all'elemento.

Ora, ecco il risultato di quello.

Vedi i bordi grigi, vero?

Non così eccezionale - ancora. Rendiamolo ancora migliore.

Un elemento ha quattro lati, superiore, inferiore, sinistro e destro

La dichiarazione di frontiera che abbiamo impostato in precedenza è stata applicata a tutti i lati dell'elemento.

Per creare il caricatore, abbiamo bisogno di due lati dell'elemento per avere colori diversi.

Non importa quali lati scegli. Ho usato i lati superiore e sinistro di seguito

.loading__anim {
  larghezza: 35px;
  altezza: 35px;
  display: blocco in linea;
  bordo: 5px solido rgba (189.189.189, 0,25);
  border-left-color: rgba (3.155.229, 1);
  border-top-color: rgba (3.155.229, 1);
  }

Ora, i lati sinistro e superiore avranno un colore bluastro per i loro bordi. Ecco il risultato di ciò:

Hmmmm. sembra carino.

Stiamo arrivando da qualche parte!

Il caricatore è rotondo, NON rettangolare. Cambiamo questo dando all'elemento .loader__anim un raggio del bordo del 50%

Ora abbiamo questo:

Non così male, eh?

Il passaggio finale è animarlo.

@keyframes rotate {
 a {
  trasforma: ruota (1 giro)
 }
}

Spero che tu abbia un'idea di come funzionano le animazioni CSS. 1 giro equivale a 360 gradi, ovvero un giro completo ruota di 360 gradi.

E applicalo in questo modo:

animazione: ruota lineare infinita di 600ms;

Yo! Lo abbiamo fatto. Tutto ciò ha senso?

A proposito, vedi il risultato qui sotto:

lo hicimos! (Spagnolo)

Abbastanza bello, eh?

Se qualcuno dei passaggi ti ha confuso, lascia un commento e saremo felici di aiutarti.

Pronto a diventare professionista?

Ho creato una guida CSS gratuita per far brillare le tue abilità CSS, immediatamente. Ottieni l'ebook gratuito.

Sette segreti CSS che non conoscevi