Spinner

An indeterminate loading indicator, the same ring a loading Button draws.

Spinner

role=status, named Loading.

Code

<Spinner />

Usage

import { Spinner } from "@elements/ui/spinner";

<Spinner />
<Spinner size="lg" label="Saving draft" />
<button class="button is-primary" disabled><Spinner size="sm" label="" /> Processing</button>

Examples

Sizes

sm, md and lg follow the theme's icon tokens; a class sets any size.

Code

<Spinner size="sm" />
<Spinner />
<Spinner size="lg" />
<Spinner class="my-big-spinner" />   /* width and height from your CSS */

Custom icon

An icon in the slot spins in place of the ring.

Code

<Spinner><Icon name="loader" /></Spinner>

In a button

A decorative spinner before or after the label; the button keeps its height.

Code

<button class="button is-primary is-sm" disabled><Spinner size="sm" label="" /> Loading...</button>
<button class="button is-outline" disabled><Spinner size="sm" label="" /> Please wait</button>
<button class="button is-secondary" disabled>Processing <Spinner size="sm" label="" /></button>

In a badge

The ring takes the badge's text color.

Syncing Updating Processing

Code

<span class="pill"><Spinner size="sm" label="" /> Syncing</span>
<span class="pill is-info"><Spinner size="sm" label="" /> Updating</span>
<span class="pill is-danger"><Spinner size="sm" label="" /> Processing</span>

Status row

A spinner named for the task, beside its text.

Processing payment... $100.00

Code

<div class="status-row">
  <Spinner label="Processing payment" />
  <span>Processing payment...</span>
  <span class="amount">$100.00</span>
</div>

Input group

A spinner in an inline-end addon of a disabled input, and with Validating... in a block-end addon under a textarea.

Validating...

Code

<InputGroup disabled>
  <Input disabled placeholder="Send a message..." attrs={{ "aria-label": "Message" }} />
  <InputGroupAddon align="inline-end"><Spinner /></InputGroupAddon>
</InputGroup>

<InputGroup>
  <Textarea placeholder="Send a message..." attrs={{ "aria-label": "Message" }} />
  <InputGroupAddon align="block-end">
    <Spinner size="sm" label="" /> <InputGroupText>Validating...</InputGroupText>
    <InputGroupButton variant="primary" size="icon-xs" label="Send" class="ml-auto"><Icon name="arrow-up" /></InputGroupButton>
  </InputGroupAddon>
</InputGroup>

RTL

A spinner before the label sits at the inline start, on the right.

Code

<div dir="rtl">
  <button class="button is-outline" disabled><Spinner size="sm" label="" /> جار التحميل</button>
</div>

Reference Spinner in the manual Every part, attribute, slot, key and data attribute.