Toast de reloj inteligente
Una esfera redonda vibra con ondas al llegar y muestra el anillo de actividad, que se cierra al pulsar Hecho.
Ajustes
Código
<div class="uvq09-wch"><button type="button" class="fire">Mostrar de nuevo</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>Hora de moverte</b><small>9 de 12 horas</small><button type="button" class="ok">Hecho</button></span></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 relojes inteligentes nos avisan con un toque en la muñeca, y este toast lo convierte en una notificación redonda. Una esfera negra con bisel metálico y corona tiembla un momento mientras se abren ondas como pulsos hápticos, y un anillo de actividad en SVG se llena hasta tres cuartos. Hecho cierra el anillo y cambia el icono por un check. Sirve para apps de salud y pausas.
El color principal es el anillo de actividad y el botón; el secundario, las ondas hápticas. Ajusta el anillo con stroke-dashoffset para mostrar cualquier progreso y deja el título en dos líneas cortas para que quepa en el círculo.