Spinner

Indexing files 12%

import { Button, ListRow, Spinner } from "@arcadia/ui";

<Button variant="secondary" icon="upload" loading>Uploading</Button>
<div {...sx("cmp-rows", cmp.rows, cmp.rowsNarrow)} data-width="narrow">
  <ListRow
    leading={<Spinner size="sm" />}
    label="Indexing files"
    meta="12%"
    interactive={false}
  />
</div>

TSX

import { Spinner } from "@arcadia/ui";

<Spinner label="Loading models" />

A 270° arc on a faint track, one turn a second; every spinner on screen turns together. Its colour is --spinner-color (icon-2); inside a Button, IconButton or Chip it follows the control's text, and those render it themselves while loading, in the icon's slot so the width never changes.

Which loader? A Spinner says a control or a small region is busy. A Skeleton holds the place of content on its way, a Pine Sweep says an agent is running, and a Shimmer marks live status text.

Examples

Beside text

sm before a short status, in the text's colour rank.

Connecting to the server

import { Spinner } from "@arcadia/ui";

<span {...sx("cmp-status", cmp.status, cmp.statusUi)} data-size="ui">
  <Spinner size="sm" /> Connecting to the server
</span>

Glyph

The raw SVG for custom compositions; the component owns size, colour and the turn.

import { SpinnerGlyph } from "@arcadia/ui";

<SpinnerGlyph style={{ width: "var(--space-8)", stroke: "var(--icon-2)" }} />

Size

SpinnerIn a buttonExtra small

Small

Medium

Large

Text

rootStyle takes layout and these knobs. Inside a control the spinner follows the control's text colour, its track a faint tint of it.

--spinner-size: Ref<IconSize>Default var(--icon-sm); Width and height.
--spinner-color: Paint | InkDefault var(--icon-2); The arc.
--spinner-track: Paint | InkDefault var(--fill-2); The full circle under the arc.

Decorative unless given a label, which makes it an img with that name; omit it when nearby text already says what is happening. A loading Button or IconButton sets aria-busy itself. With reduced motion the arc holds still.

size: "xs" | "sm" | "md" | "lg" | "text"Default "md"; 10 / 12 / 14 / 16 px, or text beside a label (Icon's text frame).
label: string; Accessible name ("Loading"). Omit when adjacent text already says what is happening.
rootStyle: RootStyle<SpinnerKnobs>; Typed StyleX override: layout and the --spinner-* knobs.

Rest props go to <span> props and render.

Usage

Examples

Beside text

Glyph

Matrix

Customising

Accessibility

API reference

Spinner