Quando si visita un sito web, può capitare che alcune pagine impieghino qualche secondo per caricarsi completamente, anche con un uso ottimizzato di HTML, CSS e JavaScript. Questo può accadere per vari motivi, come il caricamento di immagini pesanti, richieste inviate verso i database o il download di script particolarmente complessi.
Creazione di un Loader Animato con HTML, CSS e JavaScript
Un buon modo per migliorare l'esperienza utente durante l'attesa è l'uso di un loader animato. Si tratta di un'animazione visibile per alcuni secondi mentre il sito web completa il suo caricamento in background.
In questo tutorial, realizzeremo un semplice loader animato utilizzando HTML, CSS e JavaScript. Il nostro obiettivo è quello di mostrare un'animazione di caricamento e farla poi scomparire automaticamente una volta che il contenuto della pagina internet è pronto per essere visualizzato.
Obiettivi del tutorial
Alla fine di questo breve tutorial, sarai in grado di:
- creare un loader animato con CSS e non solo.
- Utilizzare JavaScript
- Personalizzare l'animazione in base alle tue esigenze e a quelle del tuo sito internet.
- Un
<div>loader - Un
<div>content
Struttura della pagina HTML
Iniziamo a sviluppare il nostro progetto creando la struttura di base della pagina web. Inseriremo quindi due <div>: uno per il loader e uno per il contenuto che apparirà dopo il caricamento. La prima cosa da fare è quella di costruire la base della pagina HTML. Il nostro file HTML dovrà presentare due sezioni principali:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader Animato</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Loader -->
<div id="loader" class="loader"></div>
<!-- Contenuto della pagina -->
<div id="content" class="content">
<h1>Benvenuto nel sito!</h1>
<p>Il contenuto è stato caricato correttamente.</p>
</div>
<script src="script.js"></script>
</body>
</html>Spiegazione del codice HTML
<div id="loader"><div id="content">
Collegamento tra CSS e JavaScript: Il file CSS (styles.css) definirà lo stile e le animazioni, mentre il file JavaScript (script.js) gestirà la logica di visualizzazione.
Come creare l'animazione con CSS
Ora è il momento di dare stile al nostro loader. Creeremo un cerchio che ruota su sé stesso per dare l'idea dell'effetto di caricamento. Aggiungiamo quindi il codice seguente nel file styles.css:
/* Stile generale */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
text-align: center;
}
/* Loader animato */
.loader {
width: 50px;
height: 50px;
border: 5px solid #ddd;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Definizione dell'animazione */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Nascondere inizialmente il contenuto della pagina */
.content {
display: none;
}Spiegazione del codice CSS
Il body è centrato verticalmente e orizzontalmente con display: flex; introdotto per mantenere il loader centrato sullo schermo. Il .loader è un cerchio con un bordo di 5px. Utilizziamo un bordo grigio (#ddd) e uno di colore blu (#3498db) per creare l'effetto di rotazione.
L'animazione @keyframes spin determina poi la rotazione del cerchio di 360° in 1 secondo in un loop infinito (infinite).
Il .content è inizialmente nascosto con display: none; e verrà mostrato tramite JavaScript.
Gestire il caricamento con JavaScript
Ora dobbiamo fare in modo che il loader scompaia automaticamente dopo qualche secondo e che il contenuto della pagina diventi visibile. Creiamo il file script.js e incolliamo in esso questo codice:
// Attendere il caricamento della pagina
window.addEventListener("load", function() {
setTimeout(function() {
// Nasconde il loader
document.getElementById("loader").style.display = "none";
// Mostra il contenuto della pagina
document.getElementById("content").style.display = "block";
}, 2000); // Tempo di attesa di 2 secondi
});Spiegazione del codice JavaScript
L'evento window.addEventListener("load", function() {...}) si attiva quando tutte le risorse della pagina (quindi immagini, CSS, ecc.) sono completamente caricate. setTimeout(function() {...}, 2000); imposta invece un timer di 2 secondi (2000 millisecondi) prima di eseguire la funzione. Dopo 2 secondi, document.getElementById("loader").style.display = "none"; nasconde il loader. Infine, document.getElementById("content").style.display = "block"; rende visibile il contenuto della pagina.
Testare il risultato del nostro lavoro
Ora puoi testare il tuo progetto. Salva tutti i file nella stessa cartella (ad esempio, index.html, styles.css e script.js). Successivamente apri il documento index.html nel browser ed osserva il comportamento del loader. Vedrai l'animazione comparire per i 2 secondi stabiliti in precedenza prima che appaia il contenuto della pagina web.
In questo tutorial abbiamo imparato a creare un loader animato con HTML, CSS e JavaScript. Ora puoi integrare questa soluzione nei tuoi progetti per offrire un'esperienza più fluida e dinamica ai tuoi utenti.
