Recordatorio guardadoTe avisaremos mañana a las 9:00
HTML + CSSToasts
Toast con anillo de cuenta atrás
Un anillo alrededor del botón de cerrar marca cuánto tiempo queda; al pasar el ratón se pausa.
Ajustes
16px
1x
6s
Código
<div class="uv-qcr"><button type="button" class="fire">Mostrar de nuevo</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>Recordatorio guardado</b><small>Te avisaremos mañana a las 9:00</small></span><button type="button" class="x" aria-label="Cerrar"><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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Toasts
Ver todos: ToastsDónde usarlo
Los toasts que se van solos deberían enseñar cuánto tiempo les queda, sobre todo si contienen información útil. Aquí el botón de cerrar está rodeado por un anillo fino que se vacía en sentido horario; al terminar, el toast se desliza fuera. Al pasar el ratón o enfocar el toast, el anillo se pausa para leer con calma.
Ajusta la duración con el control extra, de tres a doce segundos. El anillo es un círculo SVG animado con dash offset y el botón de cerrar lo descarta al momento.