Spinner

A Spinner communicates ongoing activity where completion time is unknown. It is a pure CSS component — no JavaScript required.

Use Spinner for:

Data fetching and API calls
Form submission loading states
Button loading feedback
Page or section load indicators
Full-screen loading overlays

Getting Started

Apply .spinner to any inline element. It uses currentColor for its border color, so it naturally inherits the text color of any parent — buttons, headings, or custom-colored containers.

<span class="spinner"></span>
<span class="spinner text-warning"></span>
<span class="spinner text-danger"></span>

Structure

Element	Class / Attribute	Purpose
Spinner	`spinner`	Root class. Apply to any inline element such as `<span>`.
Color	`currentColor`	Border color is inherited from the parent's text color. Use `text-*` utilities to set it.
Growing fill	`is-growing`	Switches from border ring to filled circle. Use `bg-*` utilities for color.

Animation Variants

FrontAlign provides two animation variants.

Variant	Class	Animation	Description
Default	none	`rotate(0deg → 360deg)`	A border ring with a transparent gap that spins at 0.65s per revolution.
Growing	`is-growing`	`scale(0 → 1)`	A filled circle that pulses from invisible to full size repeatedly.

Default

The default spinner renders a rotating border ring. Color is set via text-* utility classes.

<span class="spinner"></span>
<span class="spinner text-warning"></span>
<span class="spinner text-danger"></span>

`is-growing`

The growing variant pulses a filled circle from invisible to full size. Since it has no border, color is controlled via bg-* utility classes — text-* has no effect on this variant.

<span class="spinner is-growing bg-primary"></span>
<span class="spinner is-growing bg-success"></span>
<span class="spinner is-growing bg-danger"></span>

Size Modifiers

Size modifiers are applied to the .spinner element.

Class	Width / Height	Border width
default	`1rem × 1rem`	`0.125rem`
`is-medium`	`2em × 2em`	`~0.25rem`
`is-large`	`3em × 3em`	`~0.325rem`

<span class="spinner"></span>
<span class="spinner text-warning is-medium"></span>
<span class="spinner text-danger is-large"></span>

Accessibility

Always add role="status" to the spinner element so screen readers announce the loading state.
Include a visually hidden label such as <span class="sr-only">Loading…</span> inside the spinner's parent.
Remove the spinner from the DOM or set aria-hidden="true" once loading is complete.
When used inside a button, disable the button during loading to prevent repeated submissions.

Class Reference

Class	Applies to	Role
`spinner`	Any inline element	Default rotating ring spinner. Color inherits from `currentColor`.
`is-growing`	`spinner`	Scale-pulse variant. Filled circle instead of border ring. Use `bg-*` for color.
`is-medium`	`spinner`	Medium size: `2em × 2em`, border `~0.25rem`.
`is-large`	`spinner`	Large size: `3em × 3em`, border `~0.325rem`.

Notes

The spinner requires no JavaScript — all visual behavior is CSS-only.
The default ring spinner uses currentColor for its border — apply text-* utilities to change color.
The is-growing variant has no border — use bg-* utility classes for color; text-* has no effect.
Size modifiers apply to the .spinner element directly.
Always pair with role="status" and a visually hidden label for accessible loading feedback.