Rotating loading messages
A spinning ring next to status messages that slide up one after another to tell which step is running.
Settings
Code
<div class="uv-lsw" role="status"><span class="sp" aria-hidden="true"></span><span class="wd"><span>Connecting</span><span>Loading your data</span><span>Preparing the dashboard</span><span>Almost done</span></span></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 Loaders
See all LoadersWhere to use it
Long waits feel shorter when people know what is happening. This pill shows a small spinner and a line of text that cycles through four steps, each one sliding up and out as the next arrives: connecting, loading data, preparing the dashboard and almost done. It is ideal for onboarding, imports, report generation and first app launches.
Each message is its own element, so translations and screen readers handle them cleanly. With reduced motion the messages stop cycling and the last one stays visible, while the spinner slows down.