Success Checkmark
Auch genannt Animated success tick
Ein Kreis und ein Häkchen zeichnen sich selbst, um zu bestätigen, dass eine Aktion geklappt hat.
Einsatz
Formularversand, abgeschlossene Zahlung
Varianten
- SVG stroke draw
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] eine „Success Checkmark“-Animation hinzu (auch animated success tick genannt).
Ein Kreis soll sich in einem weichen Strich selbst zeichnen, dann erscheint das Häkchen darin, und das ganze Zeichen ploppt sanft ein wenig auf: ruhig und selbstsicher.
Spiele sie einmal ab, wenn die Aktion gelingt, ergänze eine Textmeldung, die Screenreader vorlesen können, und zeige bei reduzierter Bewegung (prefers-reduced-motion) sofort das fertige Zeichen.Ähnliche Animationen
Klicken
Checkbox Check Draw
Auch genannt Animated checkbox, Checkmark draw
Beim Ankreuzen wird im Kästchen ein Häkchen Strich für Strich gezeichnet.
Einsatz
Formulare, To-do-Listen
Füge bei [wo] eine „Checkbox Check Draw“-Animation hinzu (auch animated checkbox oder checkmark draw genannt).
Beim Ankreuzen soll sich das Kästchen mit Farbe füllen und das Häkchen sich in einem schnellen, weichen Strich selbst zeichnen; beim Abwählen wird es auf dieselbe Weise wieder gelöscht.
Lass es eine echte Checkbox mit ihrem checked-Zustand bleiben, die mit der Tastatur funktioniert und einen sichtbaren Fokusring hat.Line Drawing
Auch genannt Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
Eine SVG-Kontur scheint sich entlang ihres Pfads selbst zu zeichnen, indem der Dash-Offset animiert wird.
Einsatz
Icons, Logos und Illustrationen
Füge bei [wo] eine „Line Drawing“-Animation hinzu (auch path drawing oder self-drawing SVG genannt).
Jede Linie soll sich scheinbar selbst weich entlang ihres Pfads von Anfang bis Ende zeichnen, und eine zweite Linie wie ein Häkchen folgt direkt nach der ersten.
Spiele sie einmal ab, wenn sie ins Bild kommt, statt sie zu wiederholen, und zeige bei reduzierter Bewegung (prefers-reduced-motion) die fertig gezeichneten Linien.Klicken
Copy-to-Clipboard Feedback
Auch genannt Copied state, Copy icon to checkmark
Das Kopieren-Symbol verwandelt sich in ein Häkchen, und die Beschriftung zeigt kurz Kopiert.
Einsatz
Codeblöcke, Teilen-Links
Füge bei [wo] eine „Copy-to-Clipboard Feedback“-Animation hinzu (auch copied state oder copy icon to checkmark genannt).
Beim Drücken des Kopieren-Buttons soll das Kopieren-Symbol schnell wegschrumpfen, während sich ein Häkchen einzeichnet und die Beschriftung zu „Kopiert“ wechselt; nach einem kurzen Moment kehrt alles weich zurück.
Halte den Button während des Wechsels gleich groß, damit sich nichts verschiebt, und gib den Kopiert-Zustand an Screenreader aus.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 Micro-interaction
Ziehen
Swipe to Delete
Auch genannt Swipe actions, Swipe to reveal
Wischt man eine Listenzeile zur Seite, erscheinen Aktionsbuttons wie Löschen oder Archivieren.
Einsatz
Mail-Listen, To-do-Listen
Füge bei [wo] eine „Swipe to Delete“-Interaktion hinzu (auch swipe actions oder swipe to reveal genannt).
Wird eine Zeile zur Seite gezogen, soll sie direkt dem Finger folgen und dahinter Aktionsbuttons wie Archivieren und Löschen freilegen, bis diese ganz sichtbar sind, und beim Loslassen weich ohne Nachfedern an ihren Platz gleiten.
Halte vertikales Scrollen beim horizontalen Wischen funktionsfähig und mach dieselben Aktionen ohne Wischen per Tastatur und Screenreader erreichbar.Klicken
Toggle Switch
Auch genannt Switch, Switch Thumb Slide
Ein runder Knopf gleitet über eine Schiene, und die Farbe der Schiene wechselt zwischen aus und an.
Einsatz
Einstellungen, Dark Mode
Füge bei [wo] eine „Toggle Switch“-Animation hinzu (auch switch genannt).
Beim Ein- oder Ausschalten soll der runde Knopf weich ans andere Ende der Schiene gleiten, während die Farbe der Schiene wechselt: schnell und knackig, ohne Nachfedern.
Mach ihn zu einem echten barrierefreien Schalter (role="switch" mit seinem checked-Zustand), der auch mit der Tastatur funktioniert.A
1
Klicken
Add to Cart Fly
Auch genannt Fly to cart, Add-to-cart animation
Das Produktbild schrumpft und fliegt im Bogen in das Warenkorb-Symbol.
Einsatz
E-Commerce
Füge bei [wo] eine „Add to Cart Fly“-Animation hinzu (auch fly to cart oder add-to-cart animation genannt).
Beim Drücken des Hinzufügen-Buttons soll eine kleine Kopie des Produktbilds schrumpfen, während sie in einem weichen, schnellen Bogen in das Warenkorb-Symbol fliegt, und der Warenkorb soll kurz anstupsen, während sich seine Anzahl aktualisiert.
Spiele sie einmal pro Klick ab, ohne die ursprüngliche Produktkarte zu bewegen, und lass den Flug bei reduzierter Bewegung (prefers-reduced-motion) weg, aktualisiere den Warenkorb aber trotzdem.