Bootstrap components

Spinners

An indicator that something is loading when the wait cannot be measured.

A spinner tells the user that the system is working. Use it for waits of unknown length: loading a list, saving, sending. For a known amount, use a progress bar.

When to use it

Use it

Say what is loading with a text, visible or hidden.
Use the small size inside a button and disable the button.
Show it only after a moment (about 300 ms), so quick loads do not flash.

Don't

Cover the whole page when only a part is loading.
Leave it spinning after an error: show the error.
Use two spinners at once for the same wait.

Anatomy

A circle that turns (spinner-border) or pulses (spinner-grow) with a hidden label for assistive technology.

Variants and states

Spinners

Combinations

Combination	Use it for
Spinner × button	Small, inside a disabled button whose text says what happens (“Saving…”).
Spinner × region	Centred in the region that is loading, with a hidden label; not over the whole page.
Border × grow	Border for a short wait, grow when several things load at once.

What Didactika changes and why

What we changed	Why it helps
A thinner line, the colour of the text	It is a quiet signal that does not draw more attention than the content that is coming.
Always with a text for assistive technology	A silent spinner tells blind users nothing; a status message does.

Classes

Class	What it does
`spinner-border`, `spinner-grow`	The two kinds
`spinner-border-sm`, `spinner-grow-sm`	Small, for buttons and lines of text
`text-primary`…	Colour (takes the text colour)

In this version

Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable.

Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet.

Accessibility

role="status" and a hidden label (“Loading…”).
Inside a button, the spinner is aria-hidden and the button text says what happens.
Under reduced motion the spinner turns slower, never stops.