Nel mondo del web design moderno, ogni dettaglio può fare la differenza tra un sito che cattura l'attenzione e uno che passa inosservato. Uno degli elementi più efficaci per migliorare la UX è l'interattività visiva, ovvero l'uso di animazioni o segnali visivi che accompagnano l'utente durante la navigazione. Tra questi, le barre di avanzamento a scorrimento sono uno strumento semplice ma potente per indicare in modo chiaro quanto contenuto resta da leggere o da esplorare in una pagina.
Come realizzare una barra di avanzamento interattiva con HTML, CSS e JavaScript
In questa guida verrà spiegato come creare una barra di avanzamento che si riempie in tempo reale mentre l'utente scrolla la pagina. Questo tipo di elemento non solo migliora la leggibilità e il senso di orientamento. Aggiunge anche un tocco di professionalità al layout. Non è necessario essere sviluppatori esperti: verrà combinato l'utilizzo di HTML, CSS e JavaScript, spiegando ogni passaggio nel dettaglio.
Cos'è una Scroll Progress Bar e cosa serve per realizzarla
Il progetto che verrà realizzato consiste in una barra orizzontale posizionata nella parte superiore della pagina che si riempie progressivamente man mano che l'utente effettua lo scroll verso il basso. È un effetto semplice ma molto utile, specialmente nei siti con contenuti lunghi, come articoli di blog, tutorial o documentazioni tecniche. Dove è importante far capire a colpo d'occhio quanto manca alla fine della lettura.
Dal punto di vista dell'utente, la barra sarà ben visibile sin dal primo caricamento della pagina. Inizialmente sarà vuota (o quasi) e aumenterà la sua larghezza in modo fluido mentre l'utente scorre il contenuto. Il comportamento sarà completamente reattivo e sincronizzato con lo scroll verticale della finestra.
Il risultato finale avrà design moderno che si potrà facilmente personalizzare in base ai colori e allo stile del tuo sito.
Servirà una combinazione di tre linguaggi fondamentali del web: HTML, CSS e JavaScript:
- HTML sarà il punto di partenza per definire la struttura base della barra: un semplice contenitore
divdiv - CSS servirà per dare stile visivo alla barra: altezza, larghezza, colori, posizione fissa in alto e un tocco di transizione fluida per rendere più gradevole l'animazione.
- JavaScript entrerà in gioco per gestire la logica dinamica: ascolterà gli eventi di scroll della pagina e calcolerà, in tempo reale, la percentuale di avanzamento verticale dell'utente. In base a questo valore, verrà aggiornata la larghezza della barra.
Iniziando dal codice HTML:
<body>
<!-- Barra di avanzamento -->
<div id="progress-container">
<div id="progress-bar"></div>
</div>
<!-- Contenuto fittizio per lo scroll -->
<div class="section section-1">
<h1>Benvenuto nella sezione 1</h1>
<p>Questa è la prima parte del contenuto.</p>
</div>
<div class="section section-2">
<h1>Stai leggendo la sezione 2</h1>
<p>La barra di avanzamento si aggiorna man mano che scrolli!</p>
</div>
<div class="section section-3">
<h1>Hai raggiunto la sezione 3</h1>
<p>Questa è la parte finale della pagina. Bravo!</p>
</div>
</body>La barra di avanzamento è composta da un contenitore (id="progress-container"
id="progress-bar"
Il corpo della pagina è suddiviso in 3 sezioni verticali a tutta altezza (class="section"
#progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 12px;
background-color: #e0e0e0;
z-index: 9999;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#progress-bar {
height: 100%;
width: 0%;
background-color: #4caf50;
transition: width 0.25s ease-out;
}
.content {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
.section {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
font-size: 1.5rem;
padding: 20px;
text-align: center;
}
.section-1 {
background-color: #2196f3; /* blu */
}
.section-2 {
background-color: #ff9800; /* arancione */
}
.section-3 {
background-color: #9c27b0; /* viola */
}Il foglio di stile CSS definisce l'aspetto visivo dell'intera pagina, con particolare attenzione alla barra di avanzamento. Inizialmente si crea una barra fissa in alto (#progress-container
#progress-bar
Il codice JavaScript
Infine il codice JavaScript:
window.onscroll = function () {
updateProgressBar();
};
function updateProgressBar() {
const scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
const scrollHeight =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
const scrollPercent = (scrollTop / scrollHeight) * 100;
document.getElementById("progress-bar").style.width = scrollPercent + "%";
}Questo codice ha il compito di rilevare la quantità di scroll effettuata dall'utente all'interno della pagina e aggiornare in tempo reale la larghezza della barra di avanzamento. Quando l'utente scorre verso il basso, l'evento scroll viene intercettato e attiva una funzione che calcola la percentuale di avanzamento. Questo valore viene ottenuto dividendo l'altezza del contenuto già scrollato per l'altezza totale scrollabile della pagina (ovvero la differenza tra l'altezza totale del documento e l'altezza visibile nella finestra).
Una volta calcolata la percentuale, il valore viene assegnato dinamicamente alla proprietà width della barra (#progress-bar), aggiornandone la lunghezza in modo fluido grazie alla transizione CSS. In questo modo, l'utente riceve un chiaro feedback visivo sulla propria posizione nella pagina.
La barra di avanzamento. Risultato finale e conclusione
Il risultato finale viene mostrato di seguito:
Esso mostra appunto una barra di avanzamento reattiva e visivamente efficace, ottenuta utilizzando soltanto HTML, CSS e JavaScript. Questo tipo di elemento è estremamente utile per migliorare l'esperienza utente, soprattutto su pagine lunghe o ricche di contenuti, dove tenere traccia della posizione di lettura diventa fondamentale.
Con pochi passaggi è stato possibile costruire una soluzione personalizzabile che può essere adattata allo stile grafico di qualsiasi sito web. Da qui in poi è possibile aggiungere ulteriori modifiche: cambiare i colori dinamicamente, aggiungere un'icona alla fine della barra, mostrarla solo dopo un certo scroll o integrarla in una pagina portfolio o blog. Le possibilità sono tante, e ogni piccola modifica è un'occasione per imparare qualcosa in più.
