Creare un preloader animato con CSS3

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: