Warum überhaupt
In langen Texten fehlt eine Sache, die das gedruckte Buch selbstverständlich mitbringt: das Gefühl dafür, wie viel noch kommt. Ein dünner Fortschrittsbalken schließt diese Lücke. Er beantwortet eine einzige, oft gestellte Frage — wie weit bin ich? — und verschwindet ansonsten aus der Aufmerksamkeit.
Die Demo oben zeigt das Prinzip: Scrolle im Lesefeld, und der Balken sowie der Ring bewegen sich exakt mit. Beide hängen an derselben Zahl.
Die Idee dahinter
Der Fortschritt ist kein Effekt mit fester Dauer, sondern ein direkter Wert: die aktuelle Scroll-Position geteilt durch den insgesamt scrollbaren Weg. Das Ergebnis liegt zwischen null und eins. Aus dieser einen Zahl speisen sich Breite des Balkens, Füllung des Rings und — am Ende — ein dezentes Einblenden.
Weil die Anzeige an die Position gekoppelt ist und nicht an eine Zeitachse, gehört die Bewegung der Hand am Rad. Vorwärts wie rückwärts, so schnell oder langsam, wie gelesen wird.
Worauf es ankommt
- Messen, aber gedrosselt. Scroll-Ereignisse feuern dicht. Wer bei jedem einzelnen rechnet, bringt das Scrollen ins Stocken. Deshalb wird die Messung auf den Anzeige-Takt des Browsers gebündelt — flüssig auch auf schwächeren Geräten.
- Nur führen, nicht drängen. Die Anzeige bleibt dünn und ruhig. Sie begleitet den Text, sie kämpft nicht mit ihm um Aufmerksamkeit.
- Ein sinnvoller Endpunkt. Steht der Wert auf voll, ist das ein guter Moment, um leise etwas einzublenden — hier der Haken bei „gelesen". Kein Konfetti, ein Signal.
Wann einsetzen
Immer dort, wo Länge zur Orientierungsfrage wird: Fachartikel, Anleitungen, Formulare mit vielen Schritten. Bei kurzen Seiten fehlt der Nutzen — dann bleibt der Balken besser weg. Und wer Bewegung reduziert haben möchte, bekommt eine ruhende, verständliche Darstellung statt einer bewegten.