Progress bar
Shows how much of a measurable operation has completed.
On this page
This docs is LLM-friendly and available as clean Markdown.
Supported browser agents can also use WebMCP to search, read, and open these docs. Learn more
Usage
import { GlProgressBar } from "gitlab-ui-react/progress-bar";<GlProgressBar aria-label="Upload progress" value={64} />Default
Use a progress bar when an operation has a known completion amount. Use a loading icon when progress cannot be measured.
Default progress bar
import { GlProgressBar } from "gitlab-ui-react/progress-bar";
export default function ProgressBarExample() {
return <GlProgressBar aria-label="Upload progress" value={64} />;
}
Variants
Choose a semantic variant only when its meaning is also clear from nearby text. The value is expressed as a fraction of max.
Progress variants
import { GlProgressBar } from "gitlab-ui-react/progress-bar";
const variants = ["primary", "success", "warning", "danger"] as const;
export default function ProgressBarVariantsExample() {
return (
<div className="flex flex-col gap-4">
{variants.map((variant, index) => (
<GlProgressBar
key={variant}
aria-label={`${variant} progress`}
value={(index + 1) * 20}
variant={variant} />
))}
</div>
);
}
Height
Set height to a CSS length when the progress track needs to fit a compact or prominent layout. Keep the same height for progress bars that belong to one group.
Progress bar heights
import { GlProgressBar } from "gitlab-ui-react/progress-bar";
export default function ProgressBarHeightsExample() {
return (
<div className="flex flex-col gap-3">
<GlProgressBar aria-label="4 pixel progress" height="4px" value={30} />
<GlProgressBar aria-label="8 pixel progress" height="8px" value={30} />
<GlProgressBar aria-label="16 pixel progress" height="1rem" value={30} />
<GlProgressBar aria-label="32 pixel progress" height="2rem" value={30} />
</div>
);
}
Accessibility
- Give each bar a specific
aria-label, especially when multiple progress indicators appear together. - Keep
valuebetween0andmax, and update it as the operation progresses. - Do not rely on color alone to communicate success, warning, or failure.
- Add nearby visible text when users need the exact percentage or current operation status.
API
GlProgressBar forwards supported attributes to its outer <div>.
| Prop | Description | Default |
|---|---|---|
value |
Sets the current progress value. | 0 |
max |
Sets the maximum value; non-positive values fall back to 100. |
100 |
variant |
Sets primary, success, warning, or danger. |
"primary" |
height |
Sets a custom CSS height such as 8px or 1rem. |
"1rem" |
aria-label |
Sets the progress indicator’s accessible name. | "Progress bar" |