Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Empty Progress
A progress bar at 0 percent showing the empty initial state before any progress begins using shadcn/ui Progress component
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Every journey starts at zero. This React Progress component displays value 0 showing the empty state—the starting point before any progress. Built with shadcn/ui Progress and Radix UI primitives, it represents initialization—perfect for upload pre-start, download queues, onboarding not yet begun, or any task where showing the ready state helps users understand progress will begin soon.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Quarter Progress
25 percent progress state
Half Progress
50 percent halfway state
Complete Progress
100 percent completion
Skeleton
Loading state placeholder
Spinner
Indeterminate loading indicator
Badge
Status indicator component