KI-arbeitet-Toast
Ein Toast mit rotierendem Lichtrand und schimmerndem Text, während die KI arbeitet, der mit Haken und Aktion endet.
Einstellungen
Code
<div class="uv-qai"><button type="button" class="fire">Erneut generieren</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">Zusammenfassung wird erstellt…</b><b class="d">Zusammenfassung fertig</b><small>Quartalsbericht, 18 Seiten</small></span><button type="button" class="vw">Ansehen</button></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Toasts
Alle ansehen: ToastsWofür du ihn nutzen kannst
Generative Funktionen brauchen ein paar Sekunden, und ein Status-Toast informiert, ohne den Bildschirm zu blockieren. Während der Arbeit zeigt dieser Toast ein pulsierendes Funkelsymbol, ein Licht, das um den Rand läuft, und einen Schimmer über dem Text. Ist er fertig, verblasst der Rand, das Symbol wird zum Haken, der Text wechselt und ein Ansehen-Button erscheint.
Die Wartezeit stellst du mit dem Zusatzregler ein oder löst den letzten Schritt aus deiner API-Antwort aus. Schimmer und Rand stoppen bei reduzierter Bewegung. Der Wechsel wird über role status angesagt.