Lesefortschrittsbalken

Lesefortschrittsbalken: wofür es gut ist

Der Lesefortschrittsbalken ist die dünne Linie am oberen Rand, die sich füllt, während die Person den Artikel liest, und zeigt, wie viel noch fehlt.

Wähle die Farbe oder einen Farbverlauf, die Höhe und ob er oben oder unten sitzt.

So geht’s

1. Wähle Farbe, Höhe und Position.
2. Scrolle die Vorschau, um die Funktion zu sehen.
3. Kopiere den Code und füge ihn in die Artikelseite ein.

Wann nutzen

• Blog und lange Artikel.
• Rezepte und Tutorials.
• Dokumentationsseiten.

Häufige Fragen

Wie funktioniert das nur mit CSS?

Mit scrollgesteuerten Animationen (animation-timeline: scroll()) wächst der Balken beim Scrollen der Seite, ohne Skript und ohne das Scrollen zu belasten. Chrome und Edge unterstützen das ab Version 115 und Safari ab 26; in den übrigen nutzt der Code das JavaScript als Ersatz.

Wo lohnt sich der Einsatz?

Bei langen Artikeln, Rezepten und Anleitungen, wo das Wissen, wie viel noch fehlt, beim Weiterlesen hilft. Auf kurzen Seiten bewegt sich der Balken kaum und bringt nichts.

Wird der Balken vom Screenreader gelesen?

Nein: Er ist dekorativ und hat aria-hidden, damit er nicht bei jedem Scrollen angesagt wird. Wer einen Screenreader nutzt, hat andere Möglichkeiten, die Position im Text zu erfahren.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools