Feedback
Progress
A native progress bar for tasks of known or unknown length.
| Class name | Type | Description |
|---|---|---|
progressplf:progress | Component | The native progress bar |
progress-neutralplf:progress-neutral | Color | Neutral color |
progress-successplf:progress-success | Color | Success color |
progress-warningplf:progress-warning | Color | Warning color |
progress-errorplf:progress-error | Color | Error color |
progress-infoplf:progress-info | Color | Info color |
Default
The text inside <progress> is not its name: link a <label> with for or give the bar an aria-label.
40%
<div class="flex flex-col gap-2">
<div class="flex flex-wrap items-baseline justify-between gap-2 text-sm">
<label class="min-w-0 flex-1 break-words font-medium" for="progress-default">Uploading</label>
<span class="text-base-content/70">40%</span>
</div>
<progress class="progress" id="progress-default" value="40" max="100">40%</progress>
</div><div class="plf:flex plf:flex-col plf:gap-2">
<div class="plf:flex plf:flex-wrap plf:items-baseline plf:justify-between plf:gap-2 plf:text-sm">
<label class="plf:min-w-0 plf:flex-1 plf:break-words plf:font-medium" for="progress-default">Uploading</label>
<span class="plf:text-base-content/70">40%</span>
</div>
<progress class="plf:progress" id="progress-default" value="40" max="100">40%</progress>
</div>import { useId } from 'react';
import { Progress } from '@pelatform/react';
export function Example() {
const id = useId();
return (
<div className="flex flex-col gap-2">
<div className="flex flex-wrap items-baseline justify-between gap-2 text-sm">
<label className="min-w-0 flex-1 break-words font-medium" htmlFor={id}>Uploading</label>
<span className="text-base-content/70">40%</span>
</div>
<Progress id={id} value={40} max={100}>40%</Progress>
</div>
);
}import { useId } from 'react';
import { Progress } from '@pelatform/react/prefixed';
export function Example() {
const id = useId();
return (
<div className="plf:flex plf:flex-col plf:gap-2">
<div className="plf:flex plf:flex-wrap plf:items-baseline plf:justify-between plf:gap-2 plf:text-sm">
<label className="plf:min-w-0 plf:flex-1 plf:break-words plf:font-medium" htmlFor={id}>Uploading</label>
<span className="plf:text-base-content/70">40%</span>
</div>
<Progress id={id} value={40} max={100}>40%</Progress>
</div>
);
}<progress class="progress" value="20" max="100" aria-label="Primary">20%</progress>
<progress class="progress progress-neutral" value="35" max="100" aria-label="Neutral">35%</progress>
<progress class="progress progress-success" value="50" max="100" aria-label="Success">50%</progress>
<progress class="progress progress-warning" value="65" max="100" aria-label="Warning">65%</progress>
<progress class="progress progress-error" value="80" max="100" aria-label="Error">80%</progress>
<progress class="progress progress-info" value="95" max="100" aria-label="Info">95%</progress><progress class="plf:progress" value="20" max="100" aria-label="Primary">20%</progress>
<progress class="plf:progress plf:progress-neutral" value="35" max="100" aria-label="Neutral">35%</progress>
<progress class="plf:progress plf:progress-success" value="50" max="100" aria-label="Success">50%</progress>
<progress class="plf:progress plf:progress-warning" value="65" max="100" aria-label="Warning">65%</progress>
<progress class="plf:progress plf:progress-error" value="80" max="100" aria-label="Error">80%</progress>
<progress class="plf:progress plf:progress-info" value="95" max="100" aria-label="Info">95%</progress>import { Progress } from '@pelatform/react';
export function Example() {
return (
<>
<Progress value={20} max={100} aria-label="Primary">20%</Progress>
<Progress color="neutral" value={35} max={100} aria-label="Neutral">35%</Progress>
<Progress color="success" value={50} max={100} aria-label="Success">50%</Progress>
<Progress color="warning" value={65} max={100} aria-label="Warning">65%</Progress>
<Progress color="error" value={80} max={100} aria-label="Error">80%</Progress>
<Progress color="info" value={95} max={100} aria-label="Info">95%</Progress>
</>
);
}import { Progress } from '@pelatform/react/prefixed';
export function Example() {
return (
<>
<Progress value={20} max={100} aria-label="Primary">20%</Progress>
<Progress color="neutral" value={35} max={100} aria-label="Neutral">35%</Progress>
<Progress color="success" value={50} max={100} aria-label="Success">50%</Progress>
<Progress color="warning" value={65} max={100} aria-label="Warning">65%</Progress>
<Progress color="error" value={80} max={100} aria-label="Error">80%</Progress>
<Progress color="info" value={95} max={100} aria-label="Info">95%</Progress>
</>
);
}Values
Leave out value when the length is unknown.
0%
100%
3 of 8
Processing…
<div class="flex flex-col gap-2">
<div class="flex flex-wrap items-baseline justify-between gap-2 text-sm">
<label class="min-w-0 flex-1 break-words font-medium" for="progress-empty">Not started</label>
<span class="text-base-content/70">0%</span>
</div>
<progress class="progress" id="progress-empty" value="0" max="100">0%</progress>
</div>
<div class="flex flex-col gap-2">
<div class="flex flex-wrap items-baseline justify-between gap-2 text-sm">
<label class="min-w-0 flex-1 break-words font-medium" for="progress-complete">Complete</label>
<span class="text-base-content/70">100%</span>
</div>
<progress class="progress" id="progress-complete" value="100" max="100">100%</progress>
</div>
<div class="flex flex-col gap-2">
<div class="flex flex-wrap items-baseline justify-between gap-2 text-sm">
<label class="min-w-0 flex-1 break-words font-medium" for="progress-steps">Steps</label>
<span class="text-base-content/70">3 of 8</span>
</div>
<progress class="progress" id="progress-steps" value="3" max="8">3 of 8</progress>
</div>
<div class="flex flex-col gap-2">
<div class="flex flex-wrap items-baseline justify-between gap-2 text-sm">
<label class="min-w-0 flex-1 break-words font-medium" for="progress-indeterminate">Indeterminate</label>
<span class="text-base-content/70">Processing…</span>
</div>
<progress class="progress" id="progress-indeterminate" max="100">Processing…</progress>
</div><div class="plf:flex plf:flex-col plf:gap-2">
<div class="plf:flex plf:flex-wrap plf:items-baseline plf:justify-between plf:gap-2 plf:text-sm">
<label class="plf:min-w-0 plf:flex-1 plf:break-words plf:font-medium" for="progress-empty">Not started</label>
<span class="plf:text-base-content/70">0%</span>
</div>
<progress class="plf:progress" id="progress-empty" value="0" max="100">0%</progress>
</div>
<div class="plf:flex plf:flex-col plf:gap-2">
<div class="plf:flex plf:flex-wrap plf:items-baseline plf:justify-between plf:gap-2 plf:text-sm">
<label class="plf:min-w-0 plf:flex-1 plf:break-words plf:font-medium" for="progress-complete">Complete</label>
<span class="plf:text-base-content/70">100%</span>
</div>
<progress class="plf:progress" id="progress-complete" value="100" max="100">100%</progress>
</div>
<div class="plf:flex plf:flex-col plf:gap-2">
<div class="plf:flex plf:flex-wrap plf:items-baseline plf:justify-between plf:gap-2 plf:text-sm">
<label class="plf:min-w-0 plf:flex-1 plf:break-words plf:font-medium" for="progress-steps">Steps</label>
<span class="plf:text-base-content/70">3 of 8</span>
</div>
<progress class="plf:progress" id="progress-steps" value="3" max="8">3 of 8</progress>
</div>
<div class="plf:flex plf:flex-col plf:gap-2">
<div class="plf:flex plf:flex-wrap plf:items-baseline plf:justify-between plf:gap-2 plf:text-sm">
<label class="plf:min-w-0 plf:flex-1 plf:break-words plf:font-medium" for="progress-indeterminate">Indeterminate</label>
<span class="plf:text-base-content/70">Processing…</span>
</div>
<progress class="plf:progress" id="progress-indeterminate" max="100">Processing…</progress>
</div>import { useId } from 'react';
import { Progress } from '@pelatform/react';
export function Example() {
const id = useId();
return (
<>
<div className="flex flex-col gap-2">
<div className="flex flex-wrap items-baseline justify-between gap-2 text-sm">
<label className="min-w-0 flex-1 break-words font-medium" htmlFor={`${id}-empty`}>Not started</label>
<span className="text-base-content/70">0%</span>
</div>
<Progress id={`${id}-empty`} value={0} max={100}>0%</Progress>
</div>
<div className="flex flex-col gap-2">
<div className="flex flex-wrap items-baseline justify-between gap-2 text-sm">
<label className="min-w-0 flex-1 break-words font-medium" htmlFor={`${id}-complete`}>Complete</label>
<span className="text-base-content/70">100%</span>
</div>
<Progress id={`${id}-complete`} value={100} max={100}>100%</Progress>
</div>
<div className="flex flex-col gap-2">
<div className="flex flex-wrap items-baseline justify-between gap-2 text-sm">
<label className="min-w-0 flex-1 break-words font-medium" htmlFor={`${id}-steps`}>Steps</label>
<span className="text-base-content/70">3 of 8</span>
</div>
<Progress id={`${id}-steps`} value={3} max={8}>3 of 8</Progress>
</div>
<div className="flex flex-col gap-2">
<div className="flex flex-wrap items-baseline justify-between gap-2 text-sm">
<label className="min-w-0 flex-1 break-words font-medium" htmlFor={`${id}-indeterminate`}>Indeterminate</label>
<span className="text-base-content/70">Processing…</span>
</div>
<Progress id={`${id}-indeterminate`} max={100}>Processing…</Progress>
</div>
</>
);
}import { useId } from 'react';
import { Progress } from '@pelatform/react/prefixed';
export function Example() {
const id = useId();
return (
<>
<div className="plf:flex plf:flex-col plf:gap-2">
<div className="plf:flex plf:flex-wrap plf:items-baseline plf:justify-between plf:gap-2 plf:text-sm">
<label className="plf:min-w-0 plf:flex-1 plf:break-words plf:font-medium" htmlFor={`${id}-empty`}>Not started</label>
<span className="plf:text-base-content/70">0%</span>
</div>
<Progress id={`${id}-empty`} value={0} max={100}>0%</Progress>
</div>
<div className="plf:flex plf:flex-col plf:gap-2">
<div className="plf:flex plf:flex-wrap plf:items-baseline plf:justify-between plf:gap-2 plf:text-sm">
<label className="plf:min-w-0 plf:flex-1 plf:break-words plf:font-medium" htmlFor={`${id}-complete`}>Complete</label>
<span className="plf:text-base-content/70">100%</span>
</div>
<Progress id={`${id}-complete`} value={100} max={100}>100%</Progress>
</div>
<div className="plf:flex plf:flex-col plf:gap-2">
<div className="plf:flex plf:flex-wrap plf:items-baseline plf:justify-between plf:gap-2 plf:text-sm">
<label className="plf:min-w-0 plf:flex-1 plf:break-words plf:font-medium" htmlFor={`${id}-steps`}>Steps</label>
<span className="plf:text-base-content/70">3 of 8</span>
</div>
<Progress id={`${id}-steps`} value={3} max={8}>3 of 8</Progress>
</div>
<div className="plf:flex plf:flex-col plf:gap-2">
<div className="plf:flex plf:flex-wrap plf:items-baseline plf:justify-between plf:gap-2 plf:text-sm">
<label className="plf:min-w-0 plf:flex-1 plf:break-words plf:font-medium" htmlFor={`${id}-indeterminate`}>Indeterminate</label>
<span className="plf:text-base-content/70">Processing…</span>
</div>
<Progress id={`${id}-indeterminate`} max={100}>Processing…</Progress>
</div>
</>
);
}<progress class="progress" value="60" max="100" aria-label="Upload">60%</progress><progress class="plf:progress" value="60" max="100" aria-label="Upload">60%</progress>import { Progress } from '@pelatform/react';
export function Example() {
return <Progress value={60} max={100} aria-label="Upload">60%</Progress>;
}import { Progress } from '@pelatform/react/prefixed';
export function Example() {
return <Progress value={60} max={100} aria-label="Upload">60%</Progress>;
}Updating
Your script sets value, or calls removeAttribute('value') to make the bar indeterminate, and updates the value text with it.
React
Progress from @pelatform/react renders this native progress bar; leave value undefined to make it indeterminate.
| Prop | Values | Default |
|---|---|---|
color |
neutral, success, warning, error, info |
Primary |
The other props are a native progress element’s, value, max, className and ref included.
CSS variables
Override on a root or on a single bar; they win over the color modifiers.
| Variable | Default |
|---|---|
--plf-progress-bg |
Track: 20% of the primary color, or the color’s light background |
--plf-progress-fill-bg |
Fill: --plf-color-primary, or the color |
--plf-progress-height |
Space 2 (8px) |
--plf-progress-radius |
Large radius (8px) |
--plf-progress-duration |
1. for one indeterminate pass |
<progress class="progress" value="80" max="100" aria-label="Storage used" style="--plf-progress-fill-bg: var(--plf-color-danger); --plf-progress-bg: var(--plf-color-danger-subtle)">80%</progress><progress class="plf:progress" value="80" max="100" aria-label="Storage used" style="--plf-progress-fill-bg: var(--plf-color-danger); --plf-progress-bg: var(--plf-color-danger-subtle)">80%</progress>import type { CSSProperties } from 'react';
import { Progress } from '@pelatform/react';
export function Example() {
return (
<Progress
value={80}
max={100}
aria-label="Storage used"
style={{ '--plf-progress-fill-bg': 'var(--plf-color-danger)', '--plf-progress-bg': 'var(--plf-color-danger-subtle)' } as CSSProperties}
>
80%
</Progress>
);
}import type { CSSProperties } from 'react';
import { Progress } from '@pelatform/react/prefixed';
export function Example() {
return (
<Progress
value={80}
max={100}
aria-label="Storage used"
style={{ '--plf-progress-fill-bg': 'var(--plf-color-danger)', '--plf-progress-bg': 'var(--plf-color-danger-subtle)' } as CSSProperties}
>
80%
</Progress>
);
}