loading spinner tutorial

Dopo qualche settimana di assenza, ecco che ritornano i tutorial di Space Web Design. Questa volta si parla di loading spinner e di come crearli con il solo utilizzo dei fogli di stile.

Ciò che mi ha spinto a scrivere questo tutorial sono stati i molteplici post pubblicati su Google Plus dalle community internazionali di Web Designer, non si faceva altro che parlare di loading spinner o di CSS4 e HTML6, i risultati ottenuti dai nostri colleghi esteri sono a dir poco stupefacenti e ho voluto ricreare a mia volta qualcosa di simile.

Realizzando questo tutorial ho sfatata il mio mito personale, il quale reputava difficile la creazione di questi “caricatori”. Per fare una prova ho ricreato l’icona di caricamento di Facebook, raggiungendo un risultato più che ottimale che condividerò con te.

Non c’è nient’altro da dire, quindi diamo fuoco alle polveri con questo meraviglioso tutorial.

Il markup

Il markup HTML non prevedere nessun impegno. Si tratta semplicemente di tre div vuoti all’interno di un elemento genitore alla quale viene assegnata la classe loader.

Stile e Keyframes

Il CSS per realizzare un loading spinner non è molto complesso e ne molto lungo, bisogna fare attenzione però, dando la giusta animazione tramite l’utilizzo dei keyframes. Per questo motivo sezionerò il codice in modo da renderlo più chiaro possibile. Di seguito la prima parte:

Ai div interni all’elemento con classe loader, conferisco un altezza di 50px ed una larghezza di 20px.

Per visualizzare i div in riga e non in pila, bisogna utilizzare la proprietà inline-block. Questo perché di default gli elementi div sono solamente blocchi.

Per approfondire l’elemento div visita il sito W3School 

Infine, viene aggiunta la proprietà per animare il tutto, la cui struttura è la seguente:

  • Funzione di animazione personalizzata (verrà definita più avanti)
  • Tempo di esecuzione della funzione di animazione (1 secondo)
  • Definizione della curva di animazione (più conosciute come easing, nel nostro caso lineare [senza alcuna variazione])
  • Definizione delle pause e delle esecuzioni della funzione (infinita).

Per emulare al meglio il loading spinner di Facebook, bisogna ritardare l’esecuzione dell’animazione di qualche centesimo di secondo. Il valore del ritardo sarà differente per ogni div. La seconda parte del codice è la seguente:

La proprietà che viene utilizzata per ritardare l’esecuzione dell’animazione è animation-delay. Per emulare al meglio il loading spinner ho dovuto giocare con i valori di tempo, fino a raggiungere un risultato più che soddisfacente. Ad ognuno dei div che compongono il loading spinner ho assegnato un colore differente, in questo caso sono tre variazioni del color corallo.

Ora che tutto è pronto, manca solo la funzione di animazione personalizzata, la quale verrà creata attraverso i keyframes. Di seguito la terza ed ultima parte del codice CSS:

I keyframes sono degli elementi CSS che permettono di creare animazioni più o meno complesse tramite l’utilizzo dei fogli di stile. Nello snippet di codice riportato qui sopra, l’animazione è basilare, infatti utilizzo solo due proprietà CSS (transform e opacity).

La parte iniziale dell’animazione (0%) prevede un aumento delle dimensioni dei div, conferendogli, inoltre, una opacità del 100%.

Mentre la parte finale dell’animazione (100%) prevede una diminuzione delle dimensioni del div, rendendolo, inoltre, quasi invisibile.

Risultato finale

[codepen_embed height=”268″ theme_id=”8048″ slug_hash=”vmHbE” default_tab=”result” user=”manuelvrc”]See the Pen <a href=’http://codepen.io/manuelvrc/pen/vmHbE/’>vmHbE</a> by Manuel Ricci (<a href=’http://codepen.io/manuelvrc’>@manuelvrc</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]