Progress
Progress bar drawn as a fluid with rising bubbles; at 100% the label rolls to its done text. Omit `value` for indeterminate.
Playground
Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.
<HfProgress
value={38}
label="Uploading dataset"
doneLabel="Upload complete"
/>Installation
pnpm dlx shadcn@latest add @lumesec/hf-progressFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/hf-progress.jsonUsage
import { HfProgress } from "@/components/lumesec/hf-progress";
export function Example() {
return (
<HfProgress value={38} label="Uploading dataset" doneLabel="Upload complete" />
);
}Behaviour
A fluid fill with rising bubbles and a meniscus at the front; at 100% the label rolls to its done text and the fluid flashes. Leave out value for an indeterminate blob.
API reference
Attributes
valueReact propvalueTypenumberProgress from 0 to 100, clamped. Observed. Without the attribute the bar is indeterminate.
labelReact proplabelTypestringDefaultUploadingLabel above the bar and the progressbar aria-label. Re-read only when value changes.
done-labelReact propdoneLabelTypestringDefaultCompleteLabel shown once value reaches 100.
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
completeReact proponCompleteDetail{}Fires when value reaches 100. Fires again only after the value drops below 100 and returns.
Properties
valueTypenumberClamped value. Setting null removes the attribute and makes the bar indeterminate.
indeterminate (read-only)Typebooleantrue when there is no value attribute.
Accessibility
- The canvas has
role="progressbar"witharia-valuemin="0",aria-valuemax="100", a roundedaria-valuenowandaria-labelfromlabel. aria-valuenowis removed in the indeterminate state.- The percentage and label are plain text; there is no live region.
- Reduced motion: the fill jumps to the value without the wobbling front and the bar is drawn once per change, so the bubbles, indeterminate blob and done flash stand still; the label swaps without rolling.
Theming
The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --foreground, --lumesec, --lumesec-success and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-mono, --ui-muted and --ui-ok.
Related
Was this page helpful?