Home>Guide>Creare un preloader animato con CSS3

Creare un preloader animato con CSS3


Creare un preloader animato con CSS3


Utilizzare un preloader all’interno del tuo sito a volte può essere una scelta di stile, utile per “mascherare” momentaneamente la fase di caricamento del tuo sito, evitando che l’utente si imbatta in un layout spaginato o parzialmente corrotto in attesa che tutte le risorse (fogli di stile, scripts, immagini, ecc.) vengano caricate e visualizzate dal browser. Ciò accade, anche piuttosto spesso, quando si ha a che fare con connessioni lente e a basse prestazioni che impiegano tempo a completare il rendering della pagina e adottare un preloader può fare al caso tuo.

  • Leggi l'articolo, ti bastano solo 4 minuti, 27 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

Perché non utilizzare semplicemente una GIF animata?

Quante volte ti è capitato di avere bisogno di inserire un preloader nel tuo sito? Generalmente, si è soliti utilizzare una GIF animata, soluzione che risponde in pieno all’esigenza, ma che diventa molto fastidiosa in caso di modifiche (colore, dimensione).
Pensa, cosa succederebbe se una volta creata la GIF volessimo cambiarne il colore? Dovremmo aprire il file sorgente (sperando di averlo conservato) e poi modificarne ogni singolo frame… una bella scocciatura!
Ed allora, perché non utilizzare una tecnica migliore?


Passo 1: HTML

Il markup per il tuo loader è davvero molto molto semplice: si tratta semplicemente di poche righe di codice:

<div class="custom-loader-mask">
	<div class="custom-loader"></div>
</div>

Il primo elemento, contraddistinto dalla classe .custom-loader-mask, viene utilizzato per creare la maschera di copertura della pagina, il secondo elemento, contraddistinto dalla classe .custom-loader, genera invece il loader vero e proprio e si occupa del suo posizionamento.


Passo 2: Creiamo una maschera di copertura

La prima cosa da fare, è creare un livello con una leggera trasparenza che copra tutta la viewport e che dia l’idea di una pagina in fase di elaborazione.
Per farlo, è necessario dare uno stile all’apposita <div> che hai creato, ovvero:

<div class=”custom-loader-mask”>

Ti basterà aggiungere queste righe di codice al tuo foglio di stile:

.custom-loader-mask {
	background: rgba( 0, 0, 0, 0.8 );
	bottom: 0;
	left: 0;
	position:
	fixed;
	right: 0;
	top: 0;
	z-index: 999;
}

ottenendo:


Passo 3: Posizioniamo il loader

Definisci adesso la posizione del tuo loader, che sarà visualizzato sempre al centro della pagina indipendentemente dalla risoluzione:

.custom-loader {
	left: 50%;
	position: absolute;
    top: 50%;
    transform: translate( -50%, -50% );
    -webkit-transform: translate( -50%, -50% );
}

Passo 4: Il loader

È necessario dare una forma ed uno stile al tuo loader, utilizzando lo pseudo-elemento ::before di CSS:

.custom-loader:before {
    border-top: 1em solid #21759b;
    border-right: 1em solid #21759b;
    border-bottom: 1em solid #21759b;
    border-left: 1em solid transparent;
    border-radius: 50%;
    content: '';
    display: block;
    height: 5rem;
    width: 5rem;
}

Definendo, riga per riga:

  • 2-5: dimensione e colore del bordo del loader
  • 6: bordo arrotondato, con raggio 50% (così da ottenere una forma circolare)
  • 9-10: dimensioni del loader (in questo caso in rem, ma puoi esprimerle in px se preferisci)

ed ottenendo:


Passo 5: Animazione

Finora tutto semplice, ma ancora troppo statico! Aggiungiamo ciò che serve a creare un po’ di movimento:

@keyframes animation {
    0% {
        -webkit-transform: rotate( 0deg );
        transform: rotate( 0deg );
    }
    100% {
        -webkit-transform: rotate( 360deg );
        transform: rotate( 360deg );
    }
}
@-webkit-keyframes animation {
    0% {
        -webkit-transform: rotate( 0deg );
        transform: rotate( 0deg );
    }
    100% {
        -webkit-transform: rotate( 360deg );
        transform: rotate( 360deg );
    }
}

La proprietà @keyframes di CSS3 definisce un’animazione che abbiamo chiamato banalmente “animation” (ma puoi chiamarla come meglio credi), in cui andiamo a creare gli step di animazione, avvalendoci della proprietà transform: rotate:

0%: allo stato iniziale dell’animazione, applichiamo al loader una rotazione di 0° (= nessuna rotazione)
100%: allo stato finale dell’animazione, applichiamo al loader una rotazione di 360° (=rotazione completa)

Non dimenticare i prefissi relativi ai vari browser, per rendere il tutto pienamente compatibile.
È d’obbligo specificare che hai la possibilità di inserire fino a cento keyframes (uno per ogni punto percentuale) per creare animazioni sempre più complesse e particolari.


Passo 6: Uniamo il tutto

Non ti resta che assegnare l’animazione al loader, aggiungendo 2 righe di codice a quanto fatto nel passo 4:

.custom-loader:before {
    border-top: 1em solid #21759b;
    border-right: 1em solid #21759b;
    border-bottom: 1em solid #21759b;
    border-left: 1em solid transparent;
    border-radius: 50%;
    content: '';
    display: block;
    height: 5rem;
    width: 5rem;
    animation: animation 1.1s infinite linear;
    -webkit-animation: animation 1.1s infinite linear;
}

Le righe 11 e 12, applicano un’animazione chiamata animation (esattamente il nome che abbiamo dato al @keyframes), con una durata di 1.1 secondi, con un loop senza fine (infinite) e con un andamento lineare (linear).


Passo 7: jQuery

Infine, con poche righe di Javascript, puoi fare in modo che una volta terminato il rendering, il preloader scompaia, visualizzando la pagina completamente caricata:

jQuery( function( $ ) {
	$( '.custom-loader-mask' ).fadeOut( 'slow' );
} );

Ovviamente, per quest’ultimo passaggio è necessario che tu abbia inserito nella tua pagina la libreria di jQuery, di cui la funzione Javascript appena descritta utilizza alcune funzioni, in particolare fadeOut().

Ed ecco, finalmente, il risultato finale:




Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Creare un menu off-canvas con CSS3

Creare un menu off-canvas con CSS3


Impariamo a creare un menu off-canvas utilizzando esclusivamente HTML e CSS3, con gradevoli animazioni proposte senza l’utilizzo di jQuery o Javascript, così da non appesantire le pagine.

Come ottenere da codice le informazioni di un prodotto su Magento

Come ottenere da codice le informazioni di un prodotto su Magento


Impariamo a prelevare le informazioni relative ad un determinato prodotto direttamente tramite codice, utilizzando un file PHP esterno all’app Magento.

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Privacy Policy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Privacy Policy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Privacy Policy)