Spinner
A loading indicator for in-progress operations.
Overview
A spinner signals an indeterminate wait — the app is working but can't say for
how long. It is the standalone form of the indicator that Button renders in
its loading state, so inline and standalone loading read identically. Color
rides on currentColor and size on a size-* class.
$ npx morpha-ui add spinnerExamples
Sizes
The default is 20px (size-5), matching the kit's icon sizing. Scale it with
any size-* utility.
Color
The spinner inherits currentColor — set a text color to tint it.
Installation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add spinner. In the meantime, since this is the base shadcn component, you can
also add it directly:
npx shadcn@latest add spinnerAPI Reference
Prop
Type
Accessibility
- The spinner has
role="status"and a defaultaria-label="Loading"— override the label to describe what is loading. - For operations with known progress, prefer
Progressso users get a determinate signal. - The rotation is continuous; pair long waits with visible text so the state is clear even if animations are paused.