Spinner

A spinner indicates ongoing operations or content loading, providing clear visual feedback.

Basic Usage

Default renders as spinner-border rotating border style.

vue


<TSpinner/>

Use the type prop to switch to grow filling style.

vue


<TSpinner type="border"/>
<TSpinner type="grow"/>

Set the color prop to apply any Tabler preset color.

vue


<TSpinner color="blue"/>
<TSpinner color="red"/>
<TSpinner color="green"/>

Works with the grow type as well:

vue


<TSpinner type="grow" color="blue"/>
<TSpinner type="grow" color="green"/>

Set sm for a compact variant, ideal for tight layouts or buttons.

vue


<TSpinner sm/>
<TSpinner sm type="grow" color="green"/>

Enable the dots prop to display three bouncing dots, suitable for compact informational contexts.

vue


<TSpinner dots/>

Embed a spinner inside a button to represent a loading state. Use sm for the best visual result.

vue


<t-button>
  <TSpinner sm class="me-2"/>
  Loading...
</t-button>

Prop	Description	Type	Default
`type`	Spinner variant	`'border' \| 'grow'`	`'border'`
`color`	Tabler preset color	`TablerColor`	`undefined`
`sm`	Small size modifier	`boolean`	`false`
`dots`	Animated dots mode (mutually exclusive with type/size/color)	`boolean`	`false`
`label`	Accessibility label for screen readers	`string`	`'Loading...'`