Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Spinner examples · Applications

Spinner in Item for React

A download row with a spinner, the size transferred, a Cancel button and a progress bar.

Framework
UI library

A download row that shows it's working and how far along it is. The Item has a Spinner as its media, Downloading... and 129 MB / 1000 MB as its text, a Cancel button, and a Progress bar at 75 in its footer.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Where is the spinner in the download row?

In ItemMedia with variant set to icon. The Item uses variant outline. The spinner is the default size, with role="status" and an aria-label of Loading.

What do the title and description say?

ItemTitle is "Downloading...". ItemDescription is "129 MB / 1000 MB". Both sit in ItemContent, next to the media.

How is the progress bar set?

Progress is in ItemFooter, with value 75, className w-full, and aria-label "Download progress". The bar shows that value. The spinner is separate, in the media slot.

When does the Cancel button show?

ItemActions has className hidden sm:flex, so the button is hidden on the smallest width and shown from the sm breakpoint. The Button is size sm and variant outline, labeled Cancel.

How wide is the row?

The Item sits in a column with max-w-md and w-full. The item itself has className bg-background. --radius on that column is 1rem.

What does a screen reader get from this row?

The title and the "129 MB / 1000 MB" description are text. The progress bar's name is "Download progress", from its aria-label. The spinner adds a Loading status. The Cancel button's name is its label.

All 17 spinner examples