Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Spinner examples · Applications

Spinner in Empty State for React

A full-area loading state with a spinner, a title, a warning not to refresh and a Cancel button.

Framework
UI library

A long task needs more than a wheel: say what is happening and how to stop it. This Empty state puts a Spinner in EmptyMedia, a title and a Do not refresh warning in the header, and a Cancel button below.

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 does the spinner sit in the empty state?

Inside EmptyMedia with variant set to icon, in the EmptyHeader. The Spinner is the default size, with role="status" and an aria-label of Loading.

What do the title and description say?

EmptyTitle is "Processing your request". EmptyDescription is "Please wait while we process your request. Do not refresh the page." Both are visible text under the spinner.

What is the Cancel button?

A Button in EmptyContent, with size sm and variant outline, labeled Cancel. It sits under the header. This file does not attach a click handler.

Which empty parts does this file use?

Empty wraps EmptyHeader and EmptyContent. The header holds EmptyMedia, EmptyTitle, and EmptyDescription. Empty has className w-full.

How do I resize or recolor the spinner here?

Pass a class on the Spinner, such as size-6 or text-muted-foreground. EmptyMedia with variant icon is the slot around it. The title and description stay as they are.

What does a screen reader get besides the title?

The title and description are in the header, so they are read as text. The spinner adds role="status" and an aria-label of Loading. Pass your own aria-label on the Spinner when it should match the title.

All 17 spinner examples