ElyriProgress
Progress bars in determinate and indeterminate modes, with four semantic colors and a standard role.
Installation
Add component
pnpm dlx @elyri/cli@latest add progressExamples
Basic
Set a value and an accessible label; the percentage can be shown too.
import { Progress } from './components/elyri/Progress';
export function Example() {
return <Progress value={60} label="Progress" showValue />;
}Indeterminate
A looping animation without a concrete value.
import { Progress } from './components/elyri/Progress';
export function Example() {
return <Progress indeterminate label="Loading" />;
}Sizes
Two thicknesses: sm / md.
import { Progress } from './components/elyri/Progress';
export function Example() {
return (
<div className="demo-ui-stack">
<Progress value={60} size="sm" label="Small" showValue />
<Progress value={60} size="md" label="Medium" showValue />
</div>
);
}Variants
Four semantic colors: accent / success / warning / danger.
import { Progress } from './components/elyri/Progress';
export function Example() {
return (
<div className="demo-ui-stack">
<Progress value={60} variant="accent" label="Accent" showValue />
<Progress value={60} variant="success" label="Success" showValue />
<Progress value={60} variant="warning" label="Warning" showValue />
<Progress value={60} variant="danger" label="Danger" showValue />
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current value, from 0 to max |
max | number | 100 | Maximum value, defaults to 100 |
indeterminate | boolean | false | Looping animation without a concrete value |
size | 'sm' | 'md' | 'md' | Thickness: sm / md |
variant | 'accent' | 'success' | 'warning' | 'danger' | 'accent' | Color: accent / success / warning / danger |
showValue | boolean | false | Show the percentage on the right |
label | string | — | Accessible name |
...rest | HTMLAttributes | — | Remaining props are forwarded to the native div |