Spinner#

An animated activity indicator. When done it resolves to a success check (✔); when failed, a danger cross (✖); done wins. Driven by a shared ticker — one interval for every animated component, frozen on non-TTY output.

Import#

TSX 
import { Spinner } from '@sigx/terminal';

Usage#

TSX 
/** @jsxImportSource @sigx/terminal */
import { component, defineApp, signal, onMounted, Spinner } from '@sigx/terminal';

const App = component(() => {
    const done = signal(false);
    onMounted(() => {
        const t = setTimeout(() => { done.value = true; }, 2000);
        return () => clearTimeout(t);
    });
    return () => (
        <box border="single" label="Build">
            <Spinner label={done.value ? 'Built' : 'Building…'} done={done.value} variant="dots" />
        </box>
    );
});

defineApp(<App />).mount({ clearConsole: true });

Props#

PropTypeDefaultNotes
labelstring—text beside the glyph
doneboolean—resolve to a success check
failedboolean—resolve to a danger cross (done wins)
intervalnumber—animation interval override
variantSpinnerVariant'dots'frame set
colortoken | #hex—glyph color

SpinnerVariant is one of 'dots', 'line', 'arc', 'circle', 'bounce', 'moon'. All frame sets are width-1 except 'moon' (emoji — 2 cells; use only where a wider glyph column is fine).

See also#