Toast im Smartwatch-Stil
Ein rundes Zifferblatt vibriert mit Wellen beim Erscheinen und zeigt den Aktivitätsring, der sich beim Tippen auf Fertig schließt.
Einstellungen
Code
<div class="uvq09-wch"><button type="button" class="fire">Erneut zeigen</button><div class="tt" role="status"><i class="hp" aria-hidden="true"></i><i class="hp" aria-hidden="true"></i><span class="cr" aria-hidden="true"></span><span class="fc"><svg class="rg" viewBox="0 0 36 36" aria-hidden="true"><circle class="bg" cx="18" cy="18" r="16.5"/><circle class="fg" cx="18" cy="18" r="16.5" pathLength="1"/></svg><span class="ic" aria-hidden="true"><span class="a"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="4.5" r="2"/><path d="M12 8v6M12 14l-3 6.5M12 14l3 6.5M6.5 11l5.5-2.5 5.5 2.5"/></svg></span><span class="b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></span><b>Zeit, dich zu bewegen</b><small>9 von 12 Stunden</small><button type="button" class="ok">Fertig</button></span></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Toasts
Alle ansehen: ToastsWofür du ihn nutzen kannst
Wearables stupsen uns mit einem Tippen am Handgelenk an, und dieser Toast macht daraus eine runde Benachrichtigung. Ein schwarzes Zifferblatt mit Metalllünette und Krone zittert kurz, während Wellen wie haptische Impulse nach außen laufen, und ein SVG-Aktivitätsring füllt sich zu drei Vierteln. Fertig schließt den Ring und tauscht das Symbol gegen ein Häkchen. Gut für Gesundheits-Apps, Habit-Tracker und Pausen-Erinnerungen.
Die Hauptfarbe gilt für Ring und Button, die zweite für die haptischen Wellen. Mit stroke-dashoffset stellst du jeden Fortschritt ein; halte den Titel bei zwei kurzen Zeilen, damit er in den Kreis passt.