ProgressBar

Horizontal progress bar.

import { ProgressBar } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

<ProgressBar value={45} size="sm" />

<ProgressBar value={75} size="md" />

Prop	Type	Default	Description
`value`	`number`	`0`	Progress value (0-100).
`indeterminate`	`boolean`	`false`	Show indeterminate/loading animation.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size preset.
`color`	`string`	`'var(--sk-accent)'`	Fill color (CSS color value).
`class`	`string`	—	Additional CSS classes.
`unstyled`	`boolean`	`false`	Remove all default styling classes.
`'aria-label'`	`string`	`'Progress'`	Accessible label for screen readers.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.