Le animazioni di caricamento pagina all'interno di un sito web sono un elemento particolarmente utile per migliorare l'esperienza di navigazione. Infatti, quando una pagina web richiede del tempo per caricarsi, un'animazione piacevole può mantenere alta l'attenzione dell'utente.
Uno dei pregi dell'inserimento di un'animazione in fase di caricamento è la finalità di comunicare che qualcosa sta accadendo in background e che il sito non è bloccato. Inoltre, un sito che include dettagli come le animazioni di caricamento appare più curato e professionale. In questa tutorial verrà spiegato come creare una semplice ma efficace animazione di caricamento utilizzando solo HTML e CSS, in modo da rendere più interessanti le pagine web.
Obiettivi e prerequisiti
Per poter seguire questa guida è consigliato avere delle conoscenze basilari riguardo ad HTML e CSS, in modo da comprendere più facilmente le proprietà di layout e stile che verranno usate. In questo caso l'obiettivo finale è quello di realizzare una animazione come quella mostrata di seguito:
La pagina HTML
Innanzitutto, il primo passaggio è quello di creare una pagina HTML. Se si possiede già una pagina HTML, e si vuole inserire in essa l'animazione, è possibile procedere con la guida lavorando all'interno della pagina stessa.
Per fare ciò si è scelto di utilizzare l'editor Visual Studio Code. Dalla schermata principale si deve selezionare "Crea nuovo file" e per comodità esso verrà chiamato index.html, la pagina principale su cui lavorare. Una volta inizializzata la nuova pagina HTML si dovranno definire le sue proprietà principali:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animazione di caricamento</title>
<link rel="stylesheet" href="index.css">
</head>In questa parte iniziale del codice, viene specificato il tipo di documento e creato un tag html con l'attributo lang impostato su it per indicare l'Italiano come lingua della pagina. Nella sezione head sono definiti il set di caratteri, il viewport e il titolo della pagina ("Animazione di caricamento"). Inoltre, è presente un collegamento a un file CSS esterno da cui vengono ereditati gli stili della pagina.
<body>
<div id="loader">
<div class="spinner"></div>
</div>
</body>Successivamente viene implementato il body. l'unico elemento presente al suo interno è un div a cui viene assegnato un identificativo per modificarne lo stile tramite CSS.
All'interno di questo div, a sua volta, viene inserito un ulteriore div che costituirà l'elemento principale dell'animazione ovvero la ruota che gira (come visto precedentemente nell'anteprima del risultato finale). Anche a questo secondo div conviene assegnare un attributo, in questo caso la classe spinner che, oltre a identificarlo, gli assegna uno stile.
Qualora si volesse inserire un contenuto secondario nella pagina da mostrare successivamente, o parallelamente, è possibile creare una ulteriore sezione sotto il div loader e gestirla tramite HTML e CSS.
Animare il loader con HTML e CSS
Una volta conclusa la parte HTML è il momento di passare allo stile per creare e animare il loader. Per una spiegazione completa e dettagliata è importante descrivere le proprietà stilistiche assegnate all'intera pagina e al body:
/* Stile di base per la pagina */
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}Esse permettono di gestire la posizione del contenuto presente all'interno del documento tramite le proprietà margin e padding. Inoltre, vengono assegnate un'altezza ed una larghezza al 100%. La proprietà display: flex permette di gestire l'allineamento del contenuto e quindi centrarlo. Infine, lo sfondo della pagina sarà bianco (in modo da facilitare la visualizzazione del caricamento).
Una volta assegnate le proprietà generiche si può passare al div principale. Per poter gestire il suo stile è opportuno ricordare che è stato assegnato l'id loader quindi occorre aggiungere # prima del nome:
/* Stile per il contenitore del loader */
#loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
z-index: 9999;
}Il codice del contenitore
La prima istruzione si riferisce al posizionamento del div che sarà fixed. Questo significa che, usando questo valore, il box dell'elemento viene sottratto al normale flusso del documento. Il box contenitore è sempre la cosiddetta viewport. Con questo termine si intende la finestra principale del browser, ovvero l'area del contenuto.
Altra differenza fondamentale: un box posizionato con fixed non scorre con il resto del documento. Rimane, appunto, fisso al suo posto.
Anche per questo div l'altezza e la larghezza occuperanno il 100% dello spazio a disposizione e il contenuto sarà centrato sia orizzontalmente che verticalmente. Una proprietà che occorre assegnare al contenitore loader è z-index, la priorità che quell'elemento ha rispetto agli altri presenti nella pagina. Assegnando come in questo caso un valore elevato, si ottiene una gerarchia che vede il div in risalto rispetto agli altri. Lo sfondo sarà infine bianco.
Spinner di rotazione
Per quanto riguarda lo stile dello spinner di rotazione, si è scelto di assegnare le seguenti istruzioni. Ricordiamo che spinner è una classe quindi in questo caso servirà inserire il punto prima del nome:
/* Stile per la rotazione dello spinner */
.spinner {
width: 50px;
height: 50px;
border: 5px solid #cccccc;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}L'elemento di animazione avrà una forma rotonda, per comodità si è scelto di assegnare un'altezza e una larghezza di 50px. Inoltre, per poter dare colore all'animazione si imposta la proprietà border come segue:
- il primo parametro equivale allo spessore del bordo, ovvero
5px; - la seconda voce indica il tipo di bordo, cioè
solid; - l'ultimo parametro è il codice del colore che si vuole assegnare, in questo caso azzurro.
La proprietà border-radius assegna una forma rotonda all'elemento, nello specifico dà una rotazione del 50%.
Per ultima la proprietà principale dell'elemento ovvero l'animazione: infatti l'opzione spin crea uno spinner circolare con un bordo azzurro che genera l'illusione di rotazione tramite un loop della durata di 1 secondo.
/* Definizione dell'animazione spin */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}L'animazione CSS @keyframes permette di creare animazioni fluide e complesse senza l'uso di Javascript, in questo caso serve a definire i cambiamenti nello stato di un elemento nel corso del tempo. Nel dettaglio:
0%: definisce lo stato iniziale dell'animazione. Allo 0% del ciclo dell'animazione, l'elemento dovrebbe essere ruotato di 0 gradi, cioè non ruotato.100%: lo stato finale dell'animazione. Al 100% del ciclo dell'animazione, l'elemento dovrebbe essere ruotato di 360 gradi, cioè un giro completo.transform: rotateserve invece a ruotare l'elemento di 0 o 360 gradi, un giro completo.
Risultato con HTML e CSS
Una volta definito lo stile mediante CSS è possibile dare un'occhiata al risultato finale:
Un'animazione come questa che può essere utilizzata per intrattenere l'utente in fase di caricamento pagina. In questo modo un sito può apparire più curato e professionale e quindi migliorare la navigazione del visitatore alleggerendo i tempi di attesa e migliorando la sua percezione del sito web.
