ProgressBar

A thin glowing bar that shows a fraction of a whole: load, capacity or the progress of a task. It fills the width of its container.

import { ProgressBar } from 'jarvis-react-ui';

Variants

accent (the default) and bright are for normal readings; warn uses the warning color for a value that needs attention. Each variant has a matching glow.

import { Label, ProgressBar } from 'jarvis-react-ui';

export default function Variants() {
    return (
        <div className="flex w-full max-w-[320px] flex-col gap-4">
            <div className="flex flex-col gap-2">
                <Label>CPU · 42%</Label>
                <ProgressBar value={0.42} aria-label="CPU" />
            </div>
            <div className="flex flex-col gap-2">
                <Label>Memory · 70%</Label>
                <ProgressBar value={0.7} variant="bright" aria-label="Memory" />
            </div>
            <div className="flex flex-col gap-2">
                <Label>Power reserve · 15%</Label>
                <ProgressBar value={0.15} variant="warn" aria-label="Power reserve" />
            </div>
        </div>
    );
}

Heights

thin (the default) is 2px and suits dense panels. normal is 4px for a bar that is the main content of a row.

import { ProgressBar } from 'jarvis-react-ui';

export default function Heights() {
    return (
        <div className="flex w-full max-w-[320px] flex-col gap-4">
            <ProgressBar value={0.55} aria-label="Shield charge" />
            <ProgressBar value={0.55} height="normal" aria-label="Shield charge" />
        </div>
    );
}

Live progress

value is a fraction from 0 to 1; values outside that range are clamped. Width changes animate smoothly, so you can update it as often as new data arrives.

import { useEffect, useState } from 'react';
import { Label, Metric, ProgressBar } from 'jarvis-react-ui';

export default function Live() {
    const [value, setValue] = useState(0);

    useEffect(() => {
        const id = setInterval(() => {
            setValue((v) => (v >= 1 ? 0 : Math.min(1, v + 0.04)));
        }, 200);
        return () => clearInterval(id);
    }, []);

    return (
        <div className="flex w-full max-w-[320px] flex-col gap-2">
            <div className="flex items-baseline justify-between">
                <Label>Firmware upload</Label>
                <Metric value={Math.round(value * 100)} unit="%" small />
            </div>
            <ProgressBar value={value} height="normal" aria-label="Firmware upload" />
        </div>
    );
}

Width

The bar takes the full width of its parent. Set the width on a wrapper or pass a width class via className, which lands on the track element.

Accessibility

• Renders role="progressbar" with aria-valuemin="0", aria-valuemax="100" and aria-valuenow set to the rounded percentage.
• Always give it an accessible name with aria-label; a visible caption next to it is not linked automatically.
• The bar is not focusable and has no keyboard interaction.

API