Blur-Up Placeholder
Auch genannt LQIP, Blur placeholder, Progressive image load
Eine winzige, unscharfe Version des Bildes hält den Platz und wird scharf, sobald das volle Bild geladen ist.
Einsatz
Hero-Bilder, Galerien
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 „Blur-Up Placeholder“-Bildladeeffekt hinzu (auch LQIP oder Blur Placeholder genannt).
Eine winzige, stark unscharfe Version des Bildes soll sofort den Platz des Bildes füllen, und sobald das volle Bild geladen ist, soll es sanft und recht schnell scharf werden.
Reserviere die exakte Bildgröße, damit sich beim Laden nichts verschiebt, und beschneide die unscharfen Ränder, damit sie nicht über den Rahmen hinausragen.Ähnliche Animationen
ABCD
Blur In
Auch genannt Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
Das Element startet stark verschwommen und wird scharf, oft während es hereingleitet oder einblendet.
Einsatz
Einblenden von Überschriften und Hero-Texten
Füge bei [wo] eine „Blur In“-Einblendanimation hinzu (auch text focus in, focus in oder blur text reveal genannt).
Der Inhalt soll stark verschwommen und transparent beginnen und dann an seinem Platz scharf werden: weich und eher langsam, ohne Bewegung.
Spiele sie nur einmal ab und zeige den Text bei reduzierter Bewegung (prefers-reduced-motion) sofort scharf an.Skeleton Shimmer
Auch genannt Skeleton wave, Shimmer effect, placeholder-wave
Über graue Platzhalterformen gleitet ein heller Lichtschimmer.
Einsatz
Platzhalter beim Laden von Inhalten
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.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.ABCDEFGHIJKL
Darin scrollen
Progressive Blur
Auch genannt Gradient blur edge
Die Unschärfe nimmt zu einem Rand hin allmählich zu, sodass der Inhalt weich ausläuft.
Einsatz
Ränder scrollbarer Container, Header
Füge bei [wo] einen „Progressive Blur“-Rand hinzu (auch gradient blur edge genannt).
Inhalt, der zum Rand hin scrollt, soll allmählich unschärfer und weicher werden und sanft zunehmen, statt an einer harten Linie abzubrechen.
Zeige die Unschärfe nur an einem Rand, hinter dem noch weiterer Inhalt kommt, und sorge dafür, dass der unscharfe Bereich weder Klicks noch Scrollen blockiert.Mehr aus Loading & Progress
Bouncing Dots
Auch genannt Dots loader, Ellipsis loader, Three-dot loader
Eine Reihe von Punkten hüpft, blendet oder skaliert nacheinander.
Einsatz
Inline-Ladeanzeigen, Warten im Chat
Füge bei [wo] „Bouncing Dots“ hinzu (auch dots loader oder three-dot loader genannt).
Die Punkte sollen nacheinander hochhüpfen und landen, in einem leichten, federnden Rhythmus, mit einer kurzen Pause, bevor die Abfolge von vorn beginnt.
Halte die Schleife nahtlos, gib ihr ein Status-Label für Screenreader und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).Button Loading State
Auch genannt Spinner button, Loading button, Button spinner, Submit loading state
Ein Button ersetzt seine Beschriftung durch einen kleinen Spinner oder ergänzt ihn, solange eine Aktion läuft.
Einsatz
Formularversand, asynchrone Aktionen
Füge bei [wo] einen „Button Loading State“ hinzu (auch spinner button oder loading button genannt).
Beim Drücken soll der Button leicht einsinken, seine Beschriftung ausblenden und an ihrer Stelle einen kleinen Spinner zeigen, solange die Aktion läuft; danach kommt die Beschriftung zurück.
Halte die Breite des Buttons beim Laden fest, blockiere wiederholtes Drücken und melde den Busy-Zustand an Screenreader.Circular Spinner
Auch genannt Spinner, Throbber, Circular indeterminate
Ein Ring oder Bogen dreht sich fortlaufend, um anzuzeigen, dass etwas lädt.
Einsatz
Buttons, Seitenladevorgänge
Füge bei [wo] einen „Circular Spinner“ hinzu (auch spinner oder throbber genannt).
Ein Bogen soll gleichmäßig um einen blassen Ring rotieren und sich dabei verlängern und verkürzen, weich und fließend.
Halte die Rotation nahtlos, gib ihm ein Lade-Label für Screenreader und verlangsame oder stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).