AI working toast
A toast with a rotating light border and shimmering text while AI generates, ending in a check with an action.
Settings
Code
<div class="uv-qai"><button type="button" class="fire">Generate again</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">Generating summary…</b><b class="d">Summary ready</b><small>Quarterly report, 18 pages</small></span><button type="button" class="vw">View</button></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Toasts
See all ToastsWhere to use it
Generative features take a few seconds, and a status toast keeps people informed without blocking the screen. While working, this toast shows a pulsing sparkle icon, a light that runs around its border and a shimmer across the label. When the work finishes, the border fades, the icon becomes a check, the label changes and a View button appears.
Set the waiting time with the extra slider or call the finish step from your API response. The shimmer and border stop with reduced motion, and the state change is announced through role status.