Toast d'IA au travail
Un toast à bordure lumineuse qui tourne et texte scintillant pendant que l'IA génère, qui finit par une coche.
Réglages
Code
<div class="uv-qai"><button type="button" class="fire">Générer à nouveau</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">Résumé en cours…</b><b class="d">Résumé prêt</b><small>Rapport trimestriel, 18 pages</small></span><button type="button" class="vw">Voir</button></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Notifications
Voir tout : NotificationsOù l’utiliser
Les fonctions génératives prennent quelques secondes, et un toast d'état tient informé sans bloquer l'écran. Pendant le travail, ce toast affiche une étincelle qui pulse, une lumière qui parcourt sa bordure et un scintillement sur le libellé. À la fin, la bordure s'éteint, l'icône devient une coche, le libellé change et un bouton Voir apparaît.
Règle l'attente avec le curseur supplémentaire ou déclenche l'étape finale depuis la réponse de ton API. Les effets s'arrêtent avec le mouvement réduit. Le changement est annoncé grâce au rôle status.