Recordatorio guardadoTe avisaremos mañana a las 9:00
HTML + CSSToasts
Toast with countdown ring
A ring around the close button shows how long the toast will stay; hovering pauses it.
Settings
16px
1x
6s
Code
<div class="uv-qcr"><button type="button" class="fire">Show again</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>Reminder saved</b><small>We’ll remind you tomorrow at 9:00</small></span><button type="button" class="x" aria-label="Close"><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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Toasts
See all ToastsWhere to use it
Toasts that vanish on their own should show how much time is left, especially when they hold useful information. Here the close button is wrapped in a thin ring that empties clockwise; when it finishes, the toast slides away. Hovering or focusing the toast pauses the ring, so people can read calmly.
Set the duration with the extra slider, from three to twelve seconds. The ring is an SVG circle animated with a dash offset, and clicking the close button dismisses the toast right away.