shadcn.io is not affiliated with official shadcn/ui
Inline Progress Metric Banner Block for React Aria
An export job in one row for an invoicing tool: a thin progress bar with its percentage and seconds left that fills once and turns into a Download button, with Cancel and Run again.
Installation
Overview
A job-progress banner for React with React Aria, for work that takes a few seconds in the background. One flat row between the page's solid rails shows an icon, "Exporting 1,284 invoices", a thin bar with its percentage, the seconds left and a Cancel button. It opens at 62%, fills once in about eight seconds and turns into "Export ready, 4.2 MB" with a Download Shine Button and a ghost Run again button; cancelling leaves a Start again button. All three states share one cell, so nothing shifts when they swap. With reduced motion it opens on the ready state. It's built from Progress, Shine Button, Button and Guides, with your theme's tokens for every colour. For exports, imports, report builds and any job that ends in a file.
FAQ
Where do the percentage and the seconds come from?
The job fills from its starting share to 100% in JOB.totalMs, one tick every JOB.tickMs, and the percentage is that value rounded. The seconds left are counted from the share still to go, rounded up, so they fall as the bar fills and never read 0 while the job runs. This is a demo of the shape: to show a real job, replace the interval with the progress your server reports (a poll or a stream) and keep the rest.
What do screen readers hear?
The bar is a picture, hidden from assistive technology, and its percentage is not announced on every tick. A polite status line says "Export in progress", then "Export 75% complete", then "Export ready, 4.2 MB" (or "Export cancelled"), so a listener gets the milestones, not a stream of numbers. The states that aren't showing are inert and hidden, so only the current buttons can be reached with Tab.
Where does focus go when a button disappears?
Pressing Cancel or Run again swaps the cell, so the button you pressed is gone. Focus moves to the new state's own button: Start again after a cancel, Cancel after a restart, Run again when you press it in the ready state. When the job finishes on its own, focus stays where it was: moving it would pull someone out of what they were doing.