Pubblicato da: Max
In data:
13 Dic 2021
Tempo di lettura:
Oggi vedremo come creare un Loader CSS.
Ciao!
Hai presente quelle animazioni che trovi in alcune pagine web o App, quando attendi il caricamento di un file ad esempio, o che l’applicazione esegua una determinata operazione?
Bene! quello è un Loader di caricamento.
Ipotizziamo quindi che un tuo cliente, un famoso musicista, ti abbia commissionato la realizzazione del suo sito web, e che ti abbia chiesto che il sito dovrà avere una sezione, dove gli utenti possano caricare le loro musiche per poterle poi ascoltare..
A questo punto durante lo sviluppo del sito, ti rendi conto che nel momento in cui l’utente carica la propria musica, c’è un tempo di attesa, che dipende dalla grandezza del file musicale e dalla velocità di connessione. Ti viene quindi in mente, che durante questa attesa, potresti far apparire a schermo un’animazione carina che evidenzi lo stato di caricamento della risorsa.
Allora, ecco l’idea:
Sarebbe carino se questa animazione potesse evocare i tasti di un pianoforte che si muovono.
Bello direi, e anche in tema con il contesto.
Ma come realizzarla?
Passiamo subito all’azione.
Iniziamo impostando come sempre, la pagina minima html.
All’interno del body, inseriamo un div con classe container, e colleghiamo il foglio di stile.
Passiamo al foglio di stile, e assegniamo al box-sizing, la proprietà border-box, resettiamo margini e padding del documento, impostiamo il colore nero come sfondo del body, e stilizziamo il container.
All’interno di container, inseriamo una section, e all’interno di essa un div con classe loader.
Stilizziamo la section.
Stilizziamo il loader.
All’interno di loader, inseriamo gli elementi che rappresenteranno i tasti del pianoforte. Creiamo quindi 8 div con classe square.
Assegniamo a loader, un ulteriore classe loader-1, e differenziamo gli 8 tasti, aggiungendo ad ognuno di essi, un ulteriore classe square- con numeri da 1 a 8.
Spostiamoci sul foglio di stile, e assegniamo ai tasti le proprietà che avranno in comune.
Stilizziamo il primo tasto, assegnandogli anche un’animazione che chiameremo play.
Creiamo i Keyframes dell’animazione play.
Stilizziamo i rimanenti 7 tasti, spostando l’ultimo di 60px dal margine sinistro del suo contenitore, e gli altri 10px in meno l’uno dall’altro.
Copiamo l’animazione assegnata al primo tasto e la incolliamo in tutti gli altri.
Differenziamo la velocità di esecuzione dell’animazione play, tra i diversi tasti.
Bene! Con questo abbiamo concluso. Spero che l’articolo su come realizzare un Loader in CSS, ti sia piaciuto, e soprattutto possa esserti utile per i tuoi progetti.
Se vuoi scaricare i file utilizzati durante il tutorial, clicca su Download, e decomprimi il file zip.
Se invece sei interessato a guardare il video-tutorial completo, ti lascio sotto il link.
Ciao alla prossima 🙂
