Barre de progression de lecture
Choisissez la couleur et la hauteur.
Mode d’emploiQuelle part du texte a déjà été lue
Disponible en: 
Barre de progression de lecture: à quoi ça sert
La barre de progression de lecture est la fine ligne en haut de la page qui se remplit à mesure que la personne lit l’article, en montrant ce qu’il reste.
Choisissez la couleur ou un dégradé, la hauteur et si elle se place en haut ou en bas.
Mode d’emploi
- Choisissez la couleur, la hauteur et la position.
- Faites défiler l’aperçu pour la voir fonctionner.
- Copiez le code et collez-le dans la page de l’article.
Quand l’utiliser
- Blog et longs articles.
- Recettes et tutoriels.
- Pages de documentation.
Questions fréquentes
Comment cela fonctionne-t-il uniquement en CSS ?
Avec les animations liées au défilement (animation-timeline: scroll()), la barre grandit au fil du défilement de la page, sans aucun script et sans alourdir le défilement. Chrome et Edge la prennent en charge depuis la version 115 et Safari depuis la 26 ; dans les autres, le code utilise le JavaScript de secours.
Où est-il utile de l’utiliser ?
Dans les longs articles, recettes et guides, où savoir ce qu’il reste aide à continuer la lecture. Sur les pages courtes, la barre bouge à peine et n’apporte rien.
La barre est-elle lue par le lecteur d’écran ?
Non : elle est décorative et reçoit aria-hidden, pour ne pas être annoncée à chaque défilement. Les utilisateurs de lecteur d’écran ont déjà d’autres moyens de connaître leur position dans le texte.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.