Components / Progress Bar
Progress Bar
Linear progress bar with smooth transitions, buffer bar, custom value formatting, description text, range labels, indeterminate animation, striped pattern, and 3 sizes.
feedback v0.5.0
Playground
Examples
Simple
<cg-stack gap="lg" style="max-width:400px;"><cg-progress-bar value="68" label="Upload progress" showValue></cg-progress-bar><cg-progress-bar value="45" label="Storage" formatValue="45 GB / 100 GB" description="Using 45% of your plan"></cg-progress-bar></cg-stack>Buffer + range
<cg-stack gap="lg" style="max-width:400px;"><cg-progress-bar value="35" buffer="80" label="Video playback" showValue size="lg"></cg-progress-bar><cg-progress-bar value="68" label="CPU Usage" showValue minLabel="0%" maxLabel="100%"></cg-progress-bar></cg-stack>Status variants
<cg-stack gap="md" style="max-width:400px;"><cg-progress-bar value="30" label="Disk space" formatValue="30 GB / 100 GB" variant="success" description="Healthy"></cg-progress-bar><cg-progress-bar value="85" label="Disk space" formatValue="85 GB / 100 GB" variant="warning" description="Running low" striped animated></cg-progress-bar><cg-progress-bar value="97" label="Disk space" formatValue="97 GB / 100 GB" variant="danger" description="Critical"></cg-progress-bar></cg-stack>Indeterminate
<cg-progress-bar indeterminate label="Processing..." description="This may take a moment" style="max-width:400px;"></cg-progress-bar>Import
import { CgProgressBar } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-progress-bar';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Progress 0-100 |
label | string | "" | Label text above the bar |
description | string | "" | Description text below the label |
showValue | boolean | false | Show percentage value text |
formatValue | string | "" | Custom value text (e.g. "45 MB / 100 MB") |
buffer | number | 0 | Buffer value 0-100 (secondary fill) |
minLabel | string | "" | Label under left of track |
maxLabel | string | "" | Label under right of track |
variant | "default" | "success" | "warning" | "danger" | "default" | Color variant for status context |
size | "sm" | "md" | "lg" | "md" | Bar height |
indeterminate | boolean | false | Indeterminate sliding animation |
striped | boolean | false | Diagonal striped pattern |
animated | boolean | false | Animate the stripes |