Barra di avanzamento della lettura
Scegli il colore e l’altezza.
Come si usaQuanto del testo è già stato letto
Disponibile in: 
Barra di avanzamento della lettura: a cosa serve
La barra di avanzamento della lettura è la linea sottile in cima che si riempie mentre la persona legge l’articolo, mostrando quanto manca.
Scegli il colore o un gradiente, l’altezza e se sta in alto o in basso.
Come si usa
- Scegli colore, altezza e posizione.
- Fai scorrere l’anteprima per vederla in funzione.
- Copia il codice e incollalo nella pagina dell’articolo.
Quando usarlo
- Blog e articoli lunghi.
- Ricette e tutorial.
- Pagine di documentazione.
Domande frequenti
Come funziona solo con il CSS?
Con le animazioni legate allo scroll (animation-timeline: scroll()), la barra cresce mentre la pagina scorre, senza nessuno script e senza appesantire lo scroll. Chrome ed Edge la supportano dalla versione 115 e Safari dalla 26; negli altri, il codice usa il JavaScript di riserva.
Dove conviene usarla?
In articoli lunghi, ricette e guide, dove sapere quanto manca aiuta a continuare a leggere. Nelle pagine brevi la barra quasi non si muove e non aggiunge nulla.
La barra viene letta dallo screen reader?
No: è decorativa e ha aria-hidden, per non essere annunciata a ogni scroll. Chi usa uno screen reader ha già altri modi per sapere la posizione nel testo.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.