Spinner
A loading indicator for a section, a button or a table that is still fetching data.
<twig:Tabler:Spinner label="Loading…" /><div class="spinner-border" role="status"><span class="visually-hidden">Loading…</span></div>The label is visually hidden: screen readers announce it, nothing shows on screen.
Variants
Section titled “Variants”{% for variant in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'] %} <twig:Tabler:Spinner variant="{{ variant }}" label="Loading…" />{% endfor %}<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading…</span></div><div class="spinner-border text-secondary" role="status"><span class="visually-hidden">Loading…</span></div><div class="spinner-border text-success" role="status"><span class="visually-hidden">Loading…</span></div><div class="spinner-border text-danger" role="status"><span class="visually-hidden">Loading…</span></div><div class="spinner-border text-warning" role="status"><span class="visually-hidden">Loading…</span></div><div class="spinner-border text-info" role="status"><span class="visually-hidden">Loading…</span></div><div class="spinner-border text-dark" role="status"><span class="visually-hidden">Loading…</span></div><div class="spinner-border text-light" role="status"><span class="visually-hidden">Loading…</span></div>Without variant, the spinner takes the color of the surrounding text.
Types and sizes
Section titled “Types and sizes”type="grow" pulses instead of spinning; size="sm" shrinks either type:
<twig:Tabler:Spinner type="border" variant="primary" /><twig:Tabler:Spinner type="border" variant="primary" size="sm" /><twig:Tabler:Spinner type="grow" variant="success" /><twig:Tabler:Spinner type="grow" variant="success" size="sm" /><div class="spinner-border text-primary" role="status"></div><div class="spinner-border text-primary spinner-border-sm" role="status"></div><div class="spinner-grow text-success" role="status"></div><div class="spinner-grow text-success spinner-grow-sm" role="status"></div>Inline
Section titled “Inline”A small spinner next to a short message:
<div class="d-flex align-items-center gap-2 text-secondary"> <twig:Tabler:Spinner size="sm" /> Loading invoices…</div><div class="d-flex align-items-center gap-2 text-secondary"> <div class="spinner-border spinner-border-sm" role="status"></div> Loading invoices…</div>| Prop | Type | Default | Description |
|---|---|---|---|
type |
string | 'border' |
border (spinning ring) grow (pulsing dot) |
variant |
string? | null |
primary secondary success danger warning info dark light (text-*) |
size |
string | 'md' |
md sm |
label |
string? | null |
Visually-hidden text (<span class="visually-hidden">) |
Other attributes go to the root <div role="status">.
Blocks
Section titled “Blocks”| Block | Default |
|---|---|
content |
The visually-hidden label, when it is set |