A progress bar is a visual indicator of the status of a running task. Under the hood, the component uses the native HTML progress element to achieve proper a11y concerns.
<nve-progress-bar value="50"></nve-progress-bar>
Installation
<script type="module">
import '@nvidia-elements/core/progress-bar/define.js';
</script>
<nve-progress-bar value="50"></nve-progress-bar>
nve api.get nve-progress-bar
Status
Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.
Status Description accent Highlights important actions or draws attention to primary interactive elements. warning Indicates cautionary actions that require careful consideration before proceeding. success Represents positive outcomes, confirmations, or constructive actions. danger Signals destructive or irreversible actions that need extra attention and confirmation.
Progress bars with different status colors showing completion levels from 0% to 100% for task tracking.
<div nve-layout="column gap:md pad:lg full">
<nve-progress-bar value="0"></nve-progress-bar>
<nve-progress-bar value="10"></nve-progress-bar>
<nve-progress-bar status="accent" value="25"></nve-progress-bar>
<nve-progress-bar status="success" value="50"></nve-progress-bar>
<nve-progress-bar status="warning" value="75"></nve-progress-bar>
<nve-progress-bar status="danger" value="100"></nve-progress-bar>
</div>
Max Value
The max property sets the highest value that value scales to.
Max Description number
Progress bars with custom max values for representing non-percentage based progress like file counts or steps.
<div nve-layout="column gap:md pad:lg full">
<nve-progress-bar status="accent" value="25" max="50"></nve-progress-bar>
<nve-progress-bar status="accent" value="45" max="50"></nve-progress-bar>
</div>
Label Display
Use a labeled progress bar with percentage display to communicate upload or task status.
<div nve-layout="column gap:xs pad:lg align:horizontal-stretch full">
<div nve-layout="row align:space-between">
<p nve-text="label sm">Upload Status</p>
<p nve-text="label emphasis sm">80%</p>
</div>
<nve-progress-bar status="accent" value="80"></nve-progress-bar>
</div>
Indeterminate Animation
Indeterminate progress bar for showing activity when completion time is unknown, like loading or processing.
<nve-progress-bar></nve-progress-bar>
Progress bars display as an animated loading indicator when no value attribute exists.
<div nve-layout="column gap:md full">
<nve-progress-bar status="accent"></nve-progress-bar>
<nve-progress-bar status="warning"></nve-progress-bar>
<nve-progress-bar status="danger"></nve-progress-bar>
</div>
Indeterminate progress bar with custom color, height, and opacity for brand-specific styling and visual emphasis.
<nve-progress-bar
style="--accent-color: var(--nve-sys-accent-primary-background); --height: var(--nve-ref-size-150); --opacity: 1"
></nve-progress-bar>
Height Customization
The progress bar's height accepts customization through the --height CSS custom property. This allows you to create progress bars that match your application's visual hierarchy and emphasis needs. For consistency and theming, use design system tokens, but any value that suits your layout also works.
<div nve-layout="column gap:md full">
<nve-progress-bar style="--height: var(--nve-ref-size-100)"></nve-progress-bar>
<nve-progress-bar style="--height: var(--nve-ref-size-200)"></nve-progress-bar>
<nve-progress-bar style="--height: var(--nve-ref-size-300)"></nve-progress-bar>
</div>
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release
Docs Preview
API Documentation
Fully Themeable
beta
Robust unit test coverages
Passed API Review
Passed Designer VQA Review
Included in library package
stable
No known outstanding AA WCAG issues
No known outstanding performance issues
Adapts to different screen/container sizes
No breaking API changes for at least 90 days