Spinner

Loading indicators built with HTML and CSS.

Bootstrap’s spinner docs describe the markup and CSS.

Types, colors and sizes

Use type="grow" for the growing spinner and size="sm" for a small one. Spinners use the current text color, so color them with .fg-* utilities.

HTML

<div class="d-flex align-items-center gap-3">
  <bs-spinner />
  <bs-spinner type="grow" />
  <bs-spinner class="fg-primary" />
  <bs-spinner type="grow" class="fg-accent" />
  <bs-spinner size="sm" />
  <bs-spinner type="grow" size="sm" />
</div>

In buttons

Set label="" when visible text already says what is loading. The spinner is then hidden from screen readers.

HTML

<button type="button" bsButton="subtle" theme="primary" disabled>
  <bs-spinner label="" />
  <span role="status">Loading…</span>
</button>

API

BsSpinner

Selector: bs-spinner

Inputs

Name	Type	Default	Description
`type`	`'border' \| 'grow'`	`'border'`	Spinner style.
`size`	`'sm' \| 'md'`	`'md'`	Spinner size.
`label`	`string`	`'Loading…'`	Text for screen readers. Empty makes the spinner decorative.