Skeleton Shimmer
Auch genannt Skeleton wave, Shimmer effect, placeholder-wave
Über graue Platzhalterformen gleitet ein heller Lichtschimmer.
Einsatz
Platzhalter beim Laden von Inhalten
Varianten
- wave / shimmer
- text lines
- avatar + card
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 „Skeleton Shimmer“ hinzu (auch skeleton wave oder shimmer effect genannt).
Ein weiches Lichtband soll von links nach rechts über die grauen Platzhalterformen gleiten und vor dem nächsten Durchlauf kurz pausieren: fließend und ohne Eile.
Passe die Platzhalterformen an das echte Layout an, damit nichts springt, wenn der Inhalt lädt, und zeige bei reduzierter Bewegung (prefers-reduced-motion) statische Platzhalter.Ähnliche Animationen
Pulse Placeholder
Auch genannt Skeleton pulse, placeholder-glow
Graue Platzhalterblöcke blenden sanft ein und aus, um das Laden anzuzeigen.
Einsatz
Skeleton Screens
Füge bei [wo] einen „Pulse Placeholder“ hinzu (auch skeleton pulse genannt).
Graue Platzhalterblöcke in der Form des kommenden Inhalts sollen langsam und gemeinsam heller werden und zurückblenden, in einem sanften, gleichmäßigen Rhythmus.
Passe die Platzhalter an das echte Layout an, damit nichts springt, wenn der Inhalt kommt, und lass sie bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.A
Mit der Maus darüberfahren
Shine Sweep
Auch genannt Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
Beim Hovern gleitet ein diagonaler Lichtstreifen von einer Seite zur anderen über das Element.
Einsatz
Buttons, Karten, Badges
Füge bei [wo] einen „Shine Sweep“-Hover-Effekt hinzu (auch sheen, shiny button, shine on hover, glint, shimmer oder shimmer button genannt).
Ein weicher diagonaler Lichtstreifen soll von links nach rechts über das Element gleiten und sich mit einer kurzen Pause wiederholen, solange der Zeiger darüber bleibt.
Schneide den Streifen am Rand des Elements ab, stoppe ihn, wenn der Zeiger es verlässt, und spiele ihn bei reduzierter Bewegung (prefers-reduced-motion) nicht ab.ABC DEFGH
Shimmer Text
Auch genannt Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
Ein heller Glanz streicht immer wieder über die Buchstaben.
Einsatz
Badges und Ankündigungs-Pills
Füge bei [wo] einen „Shimmer Text“-Effekt hinzu (auch animated shiny text oder metallic shimmer text genannt).
Ein Lichtstreifen soll weich von links nach rechts über die Buchstaben gleiten und sich nach einer kurzen Pause wiederholen.
Halte den Text unter dem Glanz lesbar und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) still stehen.Indeterminate Linear Progress
Auch genannt Indeterminate progress bar, Buffer bar
Ein Balkensegment gleitet immer wieder über die Spur, wenn die Dauer unbekannt ist.
Einsatz
Ladeanzeigen am Seitenanfang oder in Karten
Füge bei [wo] einen „Indeterminate Linear Progress“-Balken hinzu (auch indeterminate progress bar genannt).
Ein kurzes Segment soll immer wieder von einem Ende der Spur zum anderen gleiten, schnell und weich, solange die Dauer der Aufgabe unbekannt ist.
Lass das Segment vollständig in die Spur hinein- und wieder herauslaufen, damit die Schleife keine sichtbare Naht hat, und kennzeichne ihn für Screenreader als beschäftigten Fortschrittsbalken.Mehr aus Loading & Progress
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.Typing Indicator
Auch genannt Typing dots, Chat is typing
Drei Punkte in einer Sprechblase pulsieren oder heben sich nacheinander, um zu zeigen, dass jemand oder eine KI schreibt.
Einsatz
Chats, KI-Assistenten
Füge bei [wo] einen „Typing Indicator“ hinzu (auch typing dots genannt).
Punkte in einer kleinen Chat-Blase sollen nacheinander aufsteigen und heller werden, in einem weichen, sanften Rhythmus, solange die Gegenseite schreibt.
Halte die Schleife nahtlos, entferne die Blase, sobald die Nachricht ankommt, und gib Screenreadern statt der Punkte einen kurzen Statustext.Bar Loader (Equalizer)
Auch genannt Bars loader, Audio bars
Senkrechte Balken wachsen und schrumpfen phasenversetzt, wie ein Audio-Equalizer.
Einsatz
Lade- oder Wiedergabe-Anzeigen
Füge bei [wo] eine „Bar Loader (Equalizer)“-Ladeanimation hinzu (auch Bars Loader oder Audio Bars genannt).
Ein paar senkrechte Balken sollen sich phasenversetzt strecken und stauchen wie ein Audio-Equalizer, in lebhaftem, aber gleichmäßigem Tempo.
Halte die Schleife nahtlos, gib ihr ein Status-Label für Screenreader und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).