Spinner

Spinner is a CSS-only animated loading indicator. It is used internally by Button when loading is true, but can be used standalone as well.

ExamplesCodeUsageChangelog

Basic usage

Tailwind v4

<Spinner />

Sizes

sm

md

lg

Tailwind v4

<Spinner size="sm" />   <!-- 16px -->
<Spinner size="md" />   <!-- 20px — default -->
<Spinner size="lg" />   <!-- 24px -->

Size	Dimensions	Border width
sm	16×16px	2px
md	20×20px	2px
lg	24×24px	3px

In a loading overlay

Tailwind v4

<div v-if="loading" class="flex items-center justify-center py-12">
  <Spinner size="lg" />
</div>

Accessibility

The spinner renders a <span> with role="status" and aria-label="Loading".

Props

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg'	'md'	Spinner dimensions