ProgressBar#

A read-only progress indicator: a bar of filled and empty cells plus a percentage. Not focusable, emits no events.

Import#

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

Usage#

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

const App = component(() => {
    const value = signal(0);
    onMounted(() => {
        const t = setInterval(() => { value.value = Math.min(100, value.value + 5); }, 200);
        return () => clearInterval(t);
    });
    return () => (
        <box border="single" label="Download">
            <ProgressBar value={value.value} max={100} width={30} variant="gradient" smooth showPercent />
        </box>
    );
});

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

Props#

PropTypeDefaultNotes
valuenumber0current value
maxnumber100full value
widthnumber20bar width in cells
charstring█filled cell glyph
emptyCharstring░empty cell glyph
colortoken | #hex—bar color (solid variant)
variant'solid' | 'gradient' | 'rainbow''solid'fill style
colorsstring[]—gradient stops (tokens or hex)
smoothboolean—sub-cell leading edge for a finer bar
showPercentboolean—append the percentage label

See also#