Recordatorio guardadoTe avisaremos mañana a las 9:00
HTML + CSSToasts
Toast mit Countdown-Ring
Ein Ring um den Schließen-Button zeigt die verbleibende Zeit; Hover pausiert ihn.
Einstellungen
16px
1x
6s
Code
<div class="uv-qcr"><button type="button" class="fire">Erneut zeigen</button><div class="tt" role="status"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="13" r="7.5"/><path d="M12 9.5V13l2.5 1.5M5 4.5L3 6.5M19 4.5l2 2"/></svg></span><span class="tx"><b>Erinnerung gespeichert</b><small>Wir erinnern dich morgen um 9:00</small></span><button type="button" class="x" aria-label="Schließen"><svg class="rg" viewBox="0 0 36 36" aria-hidden="true"><circle cx="18" cy="18" r="16" pathLength="1"/></svg><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 8l8 8M16 8l-8 8"/></svg></button></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
Toasts, die von selbst verschwinden, sollten zeigen, wie viel Zeit bleibt, vor allem wenn sie nützliche Infos enthalten. Hier umgibt ein dünner Ring den Schließen-Button und leert sich im Uhrzeigersinn. Ist er leer, gleitet der Toast weg. Hover oder Fokus pausieren den Ring, man kann also in Ruhe lesen.
Die Dauer stellst du mit dem Zusatzregler zwischen drei und zwölf Sekunden ein. Der Ring ist ein SVG-Kreis mit animiertem Dash-Offset, der Button schließt den Toast sofort.