machines-ui
animated

Spinners

A framed text spinner with built-in or custom frames and an optional loading label.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphSpinners } from '@fractaldesign/machines-ui';

Preview

[ FETCH ]
<GraphSpinners title="FETCH" kind="bounce" label="loading tiles" speedMs={90} />

Props

PropTypeDefaultDescription
title* string —Caption drawn on the frame's top edge as `[ TITLE ]`.
kind SpinnerKind
'slash''dots''bounce''bar'
'dots'Which glyph spinner to show. Default 'dots'.
label string 'loading'Text shown after the spinner. Default 'loading'.
speedMs number 120Milliseconds per frame. Default 120.
frames string[] —Custom frame set. Overrides `kind` when non-empty. Padded to equal width.
animated boolean trueAnimate the frames. Default true. Reduced motion holds frame 0.
corner string —Character at each corner of the frame. Default '+'.
class string ''

API

  • class forwarded to the outer element
  • motion runs live; set animated={false} to freeze
  • a11y honours prefers-reduced-motion

Types

NameKindDescription
SpinnerKindtypeWhich built-in glyph spinner to show.
'slash' | 'dots' | 'bounce' | 'bar'

Theming

CSS custom properties this component reads.

  • --graph-accent
  • --text-secondary

Related

Built from

src/lib/components/animated/GraphSpinners.svelte

machines-ui