Multi-Step Loader

Ein Kreis und ein Häkchen zeichnen sich selbst, um zu bestätigen, dass eine Aktion geklappt hat.

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.

Beim Ankreuzen wird im Kästchen ein Häkchen Strich für Strich gezeichnet.

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.

Ein Bogen wächst um einen Ring, um den erreichten Prozentsatz zu zeigen.

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.

Graue Platzhalterblöcke blenden sanft ein und aus, um das Laden anzuzeigen.

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.

Über graue Platzhalterformen gleitet ein heller Lichtschimmer.

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.