Examples
Basic
Default size, default measure location (top), no status. Percentage measure rendered above-right of the bar.
Large
size="lg" — taller bar. Use with measureLocation="inside" so the inline label has room to render.
Outside
measureLocation="outside" — the percentage trails to the right of the bar instead of sitting above it.
measureLocation="outside" renders the percentage to the right of the bar instead of
above it.
Inside
measureLocation="inside" — the percentage renders inside the filled indicator. Pair with size="lg" so the label fits.
measureLocation="inside" drops the percentage onto the filled indicator. Best with
size="lg" so the label is readable.
Single line
singleline=true — compact one-row layout. Skip title and provide ariaLabel instead.
singleline=true compacts the bar onto one row with the measure trailing. Omit
title and supply ariaLabel instead.
Without measure
measureLocation="none" — hides the visible percentage. The bar still announces its value via aria-valuenow.
measureLocation="none" hides the percentage text. The bar still announces its value via
aria-valuenow.
Finite step
Step-based progress: min / max / label / valueText replace the percentage with a step counter.
Pass min / max for non-percentage progress. The visible
measure swaps to label; the bar's aria-valuetext tells
assistive tech the same thing.
Step instructions
Step progress paired with helperText describing the current / next action. Wire ariaDescribedBy to expose the helper to assistive tech.
Step-based progress with helperText below the bar. Wire
ariaDescribedBy to point at the helper-text element id when the helper isn't obvious
from layout alone.
Truncate title
truncateTitle=true ellipses long titles instead of wrapping. Useful inside narrow containers (sidebars, table cells).
truncateTitle=true adds pf-m-truncate on the title row so
it ellipses instead of wrapping.
Title outside
Combine title with measureLocation="outside" to keep the title row clean while pushing the measure to the right of the bar.
The default measureLocation="top" renders the measure beside the title at the top.
measureLocation="outside" drops the percentage to the right of the bar, leaving the
title row clean.
Helper text
Add explanatory copy under the bar with helperText. Wire ariaDescribedBy (PF requires this when helperText is set).
Failure
status="danger" — red accent + x-circle icon. Useful with helperText describing why the run failed.
Warning
status="warning" — amber accent + triangle icon.
Inside success
Compose status with measureLocation="inside" — the percentage sits inside the filled bar at success completion.
Outside failure
status="danger" + measureLocation="outside". The status icon swaps in for the percentage at the right of the bar.
Failure without measure
status="danger" + measureLocation="none". Useful when the partial percentage isn't meaningful for the user (e.g. an indeterminate step that errored).
Useful when the percentage isn't meaningful for the user (e.g. an indeterminate step that errored out) but you still want the status color + icon.
Outside static width measure
pf-m-static-width fixes the measure width so the bar does not shift as digits change.
Documentation
Progress props
Parameters accepted by
{#include components/feedback/progress ... /}. Model mode: pass
progress=<Progress> built in Java instead — the Java tab on each example shows
the builder.
Required: id, value.
Bounds: min (default 0), max (default
100). Title row: title, truncateTitle.
Measure: label (visible),
valueText (aria-valuetext), measureLocation ("top"
default | "outside" | "inside" |
"none"). Helper: helperText.
Layout: size ("sm" |
"lg"), singleline. Variant:
variant ("success" |
"warning" | "danger") — auto-renders the matching icon.
Matches PF React's variant prop name. ARIA:
ariaLabel (required without title), ariaLabelledBy,
ariaDescribedBy (required with helperText).
Divergence from PF React. We skip className,
tooltipPosition; rename isTitleTruncated →
truncateTitle.
Bug fixed in this rewrite: the previous runtime referenced FA 5 icon names (fa:check-circle
/ fa:exclamation-triangle / fa:times-circle) — our vendor
ships FA 7, which uses fa:circle-check /
fa:triangle-exclamation / fa:circle-exclamation. Status
icons were silently rendering as the red "missing-icon" placeholder before.
Usage
Picking a measure location. "top" is the default and reads best at any
size. "outside" keeps the title row clean. Use
"inside" only with size="lg" so the label is readable.
"none" when the partial-percentage value isn't meaningful (cancelled / indeterminate
run).
Step progress. Pair min / max with
label="Step N of M" and a matching valueText. Update both
each tick so the visible measure and the screen-reader text stay in sync.
Variant + value semantics. Setting variant communicates outcome
regardless of value (e.g. failure at 42%). PF's CSS hides the percentage in the status row and shows the icon
instead. If you want both visible, drop variant and add an icon via
helperText markup.
HTMX live updates. Re-render the progress bar via hx-swap on its
container as the underlying task ticks.