Scroll Progress Indicator
Auch genannt Reading Progress Bar, Progress Bar
Ein Balken oder Ring füllt sich, während man durch die Seite oder den Artikel scrollt.
Einsatz
Artikel und lange Seiten
Varianten
- top bar
- circular
- side bar
Prompt
Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.
Füge bei [wo] einen „Scroll Progress Indicator“ hinzu (auch reading progress bar genannt).
Ein dünner Balken am oberen Rand soll sich von links nach rechts füllen, passend dazu, wie weit gescrollt wurde, und am Ende die volle Breite erreichen.
Kopple ihn direkt an die Scrollposition, ohne nachziehende Glättung, und lass ihn keinen Inhalt verdecken.Ähnliche Animationen
Determinate Progress Bar (Fortschrittsbalken)
Auch genannt Progress bar fill, Progress Indicator, Progress bar, Circular progress
Ein Balken füllt sich von links nach rechts im Verhältnis zum Fortschritt der Aufgabe.
Einsatz
Uploads, mehrstufige Formulare
Füge bei [wo] einen Fortschrittsbalken (Determinate Progress Bar) hinzu, auch progress bar fill oder progress indicator genannt.
Der Balken soll sich im Takt des echten Fortschritts von links nach rechts füllen, zwischen den Updates weich übergehen und daneben den Prozentwert zeigen.
Nutze die passende Fortschrittsbalken-Semantik mit aktuellem, minimalem und maximalem Wert, damit Screenreader ihn vorlesen können, und lass die Füllung nie zurücklaufen.Top Loading Bar (Ladebalken)
Auch genannt Page progress bar, NProgress
Ein dünner Balken am oberen Seitenrand kriecht während der Navigation voran und schließt ab, sobald die Seite geladen ist.
Einsatz
Routenwechsel in SPAs
Füge bei [wo] einen Ladebalken (Top Loading Bar) hinzu, auch page progress bar genannt.
Ein dünner Balken am oberen Rand soll zuerst schnell vorschießen und dann immer langsamer kriechen, solange die Seite lädt; wenn das Laden fertig ist, soll er ans Ende sausen und ausblenden.
Lass ihn nie das Ende erreichen, bevor das Laden wirklich abgeschlossen ist, und sorge dafür, dass er den Seiteninhalt weder verdeckt noch verschiebt.Progress Ring
Auch genannt Circular progress, Radial progress, Animated Circular Progress Bar
Ein Bogen wächst um einen Ring, um den erreichten Prozentsatz zu zeigen.
Einsatz
Uploads, Ziele, Timer
Füge bei [wo] einen „Progress Ring“ hinzu (auch circular progress oder radial progress genannt).
Oben beginnend soll ein Bogen im Uhrzeigersinn um den Ring wachsen, um den erreichten Prozentsatz zu zeigen, und beim Ankommen sanft abbremsen, während die Zahl in der Mitte mit hochzählt.
Halte Bogen und Zahl synchron und stelle den Wert mit passender Fortschrittsbalken-Semantik für Screenreader bereit.Mehr aus Scroll
A
B
C
D
Darin scrollen
Scroll Snap
Auch genannt Scroll Snapping, Snap Scrolling
Das Scrollen rastet an festgelegten Punkten wie Slides oder Abschnitten ein.
Einsatz
Karussells, bildschirmfüllende Abschnitte und Galerien
Füge bei [wo] „Scroll Snap“ hinzu (auch scroll snapping oder snap scrolling genannt).
Wenn das Scrollen endet, soll die Ansicht sauber am nächsten Abschnitt einrasten, sodass jeder bündig am Rand steht statt auf halbem Weg stehen zu bleiben.
Nutze das native Einrasten des Browsers, damit Mausrad, Touch und Tastatur weiter funktionieren, und sorg dafür, dass Inhalte, die höher als die Ansicht sind, vollständig lesbar bleiben.A
Darin scrollen
Scroll-Linked Animation
Auch genannt Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation
Der Fortschritt der Animation hängt direkt an der Scrollposition, sodass Vor- und Zurückscrollen sie abspielt oder zurückspult.
Einsatz
Storytelling-Seiten und Fortschrittseffekte
Füge bei [wo] eine „Scroll-Linked Animation“ hinzu (auch scroll-driven animation oder scroll scrub genannt).
Die Animation soll exakt der Scrollposition folgen: Runterscrollen spielt sie vorwärts ab, Hochscrollen spult sie sofort zurück, ohne eigenes zeitbasiertes Easing.
Lege die ganze Animation auf einen klaren Scrollbereich und zeige bei reduzierter Bewegung (prefers-reduced-motion) einen sinnvollen statischen Zustand.Darin scrollen
Scroll-Triggered Animation
Auch genannt Reveal on Scroll, Scroll Reveal, Animate on Scroll, Scroll Fade-In, Toggle Class on Scroll, Scroll Toggle Actions
Eine Animation spielt einmal ab, wenn ein Element in den Viewport eintritt oder ihn verlässt.
Einsatz
Einblendende Abschnitte und verzögertes Einblenden
Füge bei [wo] eine „Scroll-Triggered Animation“ hinzu (auch reveal on scroll oder animate on scroll genannt).
Jedes Element soll beim Hineinscrollen einmal einblenden und nach oben an seinen Platz gleiten, in eigenem schnellem, weichem Tempo statt der Scrollposition zu folgen.
Lass den Inhalt sichtbar, falls Skripte nicht laden, und zeige die Elemente bei reduzierter Bewegung (prefers-reduced-motion) sofort an.