Striped progress bar
A progress bar with moving diagonal stripes that fills up, resets and fills again.
Settings
Code
<div class="ul-st"><i></i></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
Where to use it
Moving stripes have a busy, work-in-progress look, a bit like caution tape. That makes this striped progress bar in CSS a natural fit for the maintenance page of an online shop, the backup step of a website builder or the download screen of an installer. The stripes keep crawling even while the fill takes its time.
Out of the box the fill loops, so it sets a mood rather than showing a real percentage. If you know the actual progress, drop the filling animation, set the width yourself and keep the moving stripes. High-contrast stripes can buzz; softer pairs are kinder on the eyes.