GraphSpinners

Active frames, padded with trailing spaces so nothing shifts between steps.

Import

svelte
import { GraphSpinners } from 'markgraphy';

Basic usage

svelte
<GraphSpinners
  title="example"
  kind={'dots'}
  label={'loading'}
/>
[ example ]

Props

PropTypeDefaultDescription
titlestring—Caption drawn on the frame’s top edge as [ TITLE ].
kind?SpinnerKind'dots'Which glyph spinner to show. Default ‘dots’.
label?string'loading'Text shown after the spinner. Default ‘loading’.
speedMs?number120Milliseconds per frame. Default 120.
frames?string[]—Custom frame set. Overrides kind when non-empty. Padded to equal width.
animated?booleantrueAnimate the frames. Default true. Reduced motion holds frame 0.
corner?string—Character at each corner of the frame. Default ’+‘.
class?string''—

Exported types

  • SpinnerKind
  • GraphSpinnersProps

Reduced motion

Animation is disabled under prefers-reduced-motion.