Upload progress toast
A toast with a progress bar and percentage that fills up while files upload, then confirms and slips away.
Settings
Code
<div class="uv-zp"><button class="fire">Start upload</button><div class="toast"><div class="copy"><b>Uploading files</b><small>Preparing…</small><i><em></em></i></div><strong>0%</strong></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
Where to use it
Uploads take time, and people want to keep working instead of staring at a spinner. Picture a photographer sending a wedding gallery to a client portal, or a landlord adding photos to a rental listing: the progress toast sits in a corner, counting up to 100% and switching to “Upload complete” at the end.
The demo fakes the progress with a timer, so link it to your real upload events. If you do not know the total size, a percentage will lie; use an indeterminate bar instead. For a single small file, a plain success message is enough.