Svelte 5 component · machines-ui · Animated
GraphSpinners
A framed text spinner with built-in or custom frames and an optional loading label.
Install
GraphSpinners is a Svelte 5 animated ASCII spinners component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphSpinners } from '@fractaldesign/machines-ui';Usage
<GraphSpinners title="FETCH" kind="bounce" label="loading tiles" speedMs={90} />Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the frame's top edge as `[ TITLE ]`. | — |
kind | SpinnerKind Which glyph spinner to show. Default 'dots'. | 'dots' |
label | string Text shown after the spinner. Default 'loading'. | 'loading' |
speedMs | number Milliseconds per frame. Default 120. | 120 |
frames | string[] Custom frame set. Overrides `kind` when non-empty. Padded to equal width. | — |
animated | boolean Animate the frames. Default true. Reduced motion holds frame 0. | true |
corner | string Character at each corner of the frame. Default '+'. | — |
class | string | '' |
Related components
GraphState A four-state machine drawn in ASCII — ready, think, act, done — with the current state and its outgoing…GraphStream A live sparkline with the current value in large type, appending a new reading on an interval and counting…GraphSurya A sun wheel with breathing rays that rises from the horizon to its apex and sets again, forever; purely…GraphTerminal A terminal session that types prompt lines and streams output, with optional looping animation.GraphTicker A single rotating row of health tokens such as `[ OK ] api`, each keeping its own status colour.GraphTypewriter Types lines of text one character at a time behind a blinking cursor, then optionally clears and repeats.