Quante volte abbiamo atteso il caricamento delle pagine Web prima di iniziare a navigare? Da oggi potremo decidere noi come aspettare questo tempo, all'interno della seguente lezione impareremo infatti a creare un loader personalizzato interamente sviluppato con CSS che potremo usare per anticipare l'apertura delle pagine Web o l'esecuzione di specifiche funzioni dove necessitiamo di un tempo di caricamento.
Il risultato finale di quello che creeremo è il seguente:
Come creare un loader di caricamento pagina con CSS
Partiamo dalla creazione di un nuovo documento HTML ed impostiamo la struttura della pagina Web.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Creazione di un loader con CSS</title>
</head>
<body>
</body>
</html>Inseriamo per prima cosa gli elementi strutturali che comporranno la nostra pagina, partendo dall'elemento più esterno <section></section> ed aggiungendo all'interno il <div></div> principale del nostro esercizio, quello che avrà il compito di contenere l'animazione. Assegniamo a questo un nome riconoscibile che potremo richiamare in seguito all'interno del tag <style></style>.
<section>
<div class="loader">
</div>
</section>Nel <div></div> chiamato loader dobbiamo ora inserire i singoli elementi che faremo muovere e daranno forma al loader animato. Inseriamo quindi l'elemento <span></span>, o meglio gli elementi <span></span>, con precisione 20 in quanto l'animazione sarà circolare e formata da 20 elementi che disposti circolarmente daranno forma ad un cerchio come il seguente:
Creaiamo gli elementi del loader
Vediamo quindi come creare questo insieme di elementi. Come abbiamo detto occorre inserire 20 elementi <span></span> all'interno del <div></div> principale.
<section>
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</section>Una volta creati tutti gli elementi dovremo inserire un nome o meglio una variabile che andrà ad identificare ognuno di essi durante l'animazione. Assegneremo infatti ad ogni <span></span> una durata differente di lampeggiamento, alternando l'accensione degli elementi, e otterremo un movimento fluido. Grazie alle variabili CSS è possibile identificare i singoli elementi all'interno delle proprietà transform che imposteremo in seguito nel codice <style></style>. Aggiungiamo quindi una variabile numerica ad ogni elemento interno.
<section>
<div class="loader">
<span style="--load:1;"></span>
<span style="--load:2;"></span>
<span style="--load:3;"></span>
<span style="--load:4;"></span>
<span style="--load:5;"></span>
<span style="--load:6;"></span>
<span style="--load:7;"></span>
<span style="--load:8;"></span>
<span style="--load:9;"></span>
<span style="--load:10;"></span>
<span style="--load:11;"></span>
<span style="--load:12;"></span>
<span style="--load:13;"></span>
<span style="--load:14;"></span>
<span style="--load:15;"></span>
<span style="--load:16;"></span>
<span style="--load:17;"></span>
<span style="--load:18;"></span>
<span style="--load:19;"></span>
<span style="--load:20;"></span>
</div>
</section>Ora siamo pronti per impostare il codice CSS nel tag <style></style>. Partiamo con l'impostazione della pagina, ovvero dei margini e l'allineamento generale degli elementi presenti all'interno. In questo caso vogliamo che essi siano centrali rispetto alla pagina, motivo per cui scegliamo di usare le proprietà display: flex;, justify-content: center; e align-items: center;
body{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #111;
}Diamo forma agli elementi
Impostate le prime regole generali di formattazione del documento possiamo iniziare a lavorare sulla forma degli elementi.
section .loader span{
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 100%;
}
section .loader span::before{
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ef575f;
}
Abbiamo ottenuto il primo cerchio che comporrà la nostra animazione di caricamento. A questo punto procediamo con la creazione del cerchio completo, il quale sarà composto da 20 cerchi come stabilito dagli elementi HTML inseriti in precedenza. Aggiungiamo la proprietà transform alla quale associamo il seguente valore necessario per la creazione del cerchio completo che comporrà il loader.
section .loader span{
transform: rotate(calc(18deg * var(--load)));
}
Proseguiamo aggiungendo diverse gradazioni di box-shadow che andremo ad animare per creare l'effetto mostra/nascondi dei cerchietti animati.
section .loader span::before{
box-shadow: 0 0 10px #ef575f,
0 0 20px #ef575f,
0 0 40px #ef575f,
0 0 60px #ef575f,
0 0 80px #ef575f,
0 0 100px #ef575f;
}
Attiviamo l'animazione CSS
Ora è giunto il momento di dare forma all'animazione CSS, aggiungiamo la proprietà animation alla quale assegniamo il nome pulse, la durata di 2s e un'animazione lineare, oltre che la durata infinita.
section .loader span::before{
animation: animate 2s linear infinite;
}Inseriamo inoltre una seconda animazione. Quella che permetterà di agire ciclicamente sui singoli elementi ed impostare un ritardo di esecuzione diverso per ogni elemento <span></span>
section .loader span::before{
animation-delay: calc(0.1s * var(--load));
}Infine attiviamo l'animazione CSS inserendola all'interno delle proprietà @keyframes di CSS.
@keyframes pulse
{
0%
{
transform: scale(1);
}
100%
{
transform: scale(0);
}
}
