Generando resumen…Resumen listoInforme trimestral, 18 páginas
HTML + CSSToasts
Toast de IA trabajando
Un toast con borde de luz que gira y texto con brillo mientras la IA genera, que termina en un check con acción.
Ajustes
16px
1x
2.6s
Código
<div class="uv-qai"><button type="button" class="fire">Generar otra vez</button><div class="tt" role="status"><span class="ic"><span class="sp"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l1.6 4.8L18.5 9.5l-4.9 1.7L12 16l-1.6-4.8L5.5 9.5l4.9-1.7z"/><path d="M18.5 15.5l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z"/></svg></span><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></span><span class="tx"><b class="w">Generando resumen…</b><b class="d">Resumen listo</b><small>Informe trimestral, 18 páginas</small></span><button type="button" class="vw">Ver</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
Las funciones generativas tardan unos segundos y un toast de estado mantiene informada a la gente sin bloquear la pantalla. Mientras trabaja, este toast muestra un destello que late, una luz que recorre su borde y un brillo sobre la etiqueta. Al terminar, el borde se apaga, el icono pasa a check, cambia la etiqueta y aparece un botón Ver.
Ajusta la espera con el control extra o llama al paso final desde la respuesta de tu API. El brillo y el borde se detienen con movimiento reducido y el cambio se anuncia con role status.