<Spinner> shows a small loading indicator. Used inside buttons, panels, and lists while async work is in flight.

`<Spinner>`

A simple loading spinner. Use it inside buttons, panel headers, list rows, or anywhere you need to indicate pending work.

<Button> already shows a spinner internally when you pass @isLoading={{true}} — you usually don't need <Spinner> directly inside buttons.

Basic Usage

<Spinner />

With a Loading Message

You can pass the message as @text, @loadingMessage, or @message, or yield it as a block:

<Spinner @text="Loading drivers…" />

<Spinner>
  Saving — please wait
</Spinner>

Sizing

The spinner accepts either a preset size or explicit pixel dimensions.

{{!-- Preset sizes --}}
<Spinner @size="xs" />   {{!-- 12x12 --}}
<Spinner @size="sm" />   {{!-- 14x14 --}}
<Spinner @size="md" />   {{!-- 16x16 (default) --}}
<Spinner @size="lg" />   {{!-- 18x18 --}}
<Spinner @size="xl" />   {{!-- 20x20 --}}
<Spinner @size="2xl" />  {{!-- 22x22 --}}
<Spinner @size="3xl" />  {{!-- 24x24 --}}

{{!-- Numeric size — width and height both equal to the number, in px --}}
<Spinner @size={{32}} />

{{!-- Explicit width/height --}}
<Spinner @width={{20}} @height={{20}} />

Arguments

Argument	Type	Default	Description
`@size`	string \| number	—	Preset (`xs`/`sm`/`md`/`lg`/`xl`/`2xl`/`3xl`) or numeric pixel size — sets both width and height
`@width`	number	`16`	Width in px (used if `@size` not set)
`@height`	number	`16`	Height in px (used if `@size` not set)
`@text`	string	—	Loading message text
`@loadingMessage`	string	—	Alias for `@text`
`@message`	string	—	Alias for `@text`
`@wrapperClass`	string	—	Extra classes on the outer wrapper
`@iconClass`	string	—	Extra classes on the spinner icon
`@loadingMessageClass`	string	—	Extra classes on the loading message

Yielded content takes priority over @text / @loadingMessage / @message.

Real-World Examples

{{!-- Inline spinner next to a label --}}
<div class="flex items-center">
  <Spinner @size="xs" />
  <span class="ml-2 text-sm">Updating…</span>
</div>

{{!-- Loading state for a section --}}
{{#if this.isLoading}}
  <div class="flex items-center justify-center py-12">
    <Spinner @size="lg" @text="Loading orders…" />
  </div>
{{else}}
  {{!-- ... --}}
{{/if}}

{{!-- Inside a table cell --}}
{{#if row.processing}}
  <Spinner @size="xs" />
{{else}}
  {{row.status}}
{{/if}}

Source

File	Description
`addon/components/spinner.hbs`	Template
`addon/components/spinner.js`	Class

Spinner