progressBeginneranimation
Progress Bar
A horizontal progress bar with a label and percentage indicator.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a progress bar with Tailwind: a label and percent value above (e.g. 'Uploading' / '64%'), then a thin gray track with a colored fill that animates width transitions. Use bg-gray-200 for the track and bg-indigo-600 for the fill. Round the corners on both.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/progress-bars/1.html
License: MIT
Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-app-progress-bar
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class="mx-auto max-w-md p-6 w-full">
<div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<p class="text-sm font-medium text-gray-900">25%</p>
<div class="mt-2 h-2 w-full rounded-full bg-gray-200">
<div class="h-full rounded-full bg-blue-600" style="width: 25%"></div>
</div>
</div>
</div>
</div>