The progress-ring component shows the status of a pending task. It also serves the basis of the page loading element.
<div nve-layout="row gap:sm">
<nve-progress-ring status="accent"></nve-progress-ring>
<nve-progress-ring status="accent" value="66"></nve-progress-ring>
</div>
Installation
<script type="module">
import '@nvidia-elements/core/progress-ring/define.js';
</script>
<div nve-layout="row gap:sm">
<nve-progress-ring status="accent"></nve-progress-ring>
<nve-progress-ring status="accent" value="66"></nve-progress-ring>
</div>
nve api.get nve-progress-ring
Value
Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. MDN
Value Description number
Progress rings displaying completion percentages from indeterminate to 0%, 33%, 66%, and 100%.
<div nve-layout="row gap:sm">
<nve-progress-ring status="accent"></nve-progress-ring>
<nve-progress-ring status="accent" value="0"></nve-progress-ring>
<nve-progress-ring status="accent" value="33"></nve-progress-ring>
<nve-progress-ring status="accent" value="66"></nve-progress-ring>
<nve-progress-ring status="accent" value="100"></nve-progress-ring>
</div>
Max Value
The max value of the progress ring that the value is proportionally scaled to.
Max Description number
Progress rings with custom max values for proportional progress within a defined scale.
<div nve-layout="row gap:sm">
<nve-progress-ring status="accent" max="20" value="5"></nve-progress-ring>
<nve-progress-ring status="accent" max="20" value="10"></nve-progress-ring>
<nve-progress-ring status="accent" max="20" value="15"></nve-progress-ring>
</div>
Indicating 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. neutral
Progress rings with warning and danger status colors for indicating critical or cautionary states.
<div nve-layout="row gap:sm">
<nve-progress-ring status="warning" value="75"></nve-progress-ring>
<nve-progress-ring status="danger" value="75"></nve-progress-ring>
<nve-progress-ring status="warning"></nve-progress-ring>
<nve-progress-ring status="danger"></nve-progress-ring>
</div>
When used with text, please set size="xs".
Progress ring paired inline with descriptive text label for communicating loading state.
<div nve-layout="row gap:xs align:vertical-center" nve-text="medium">
<nve-progress-ring status="accent" size="xs" aria-labelledby="processing-label"></nve-progress-ring>
<span id="processing-label">Processing...</span>
</div>
Sizing
Controls the visual scale of an element to match its importance and available space.
Size Description sm Compact size for dense layouts or secondary elements with less visual prominence. md Standard size that works well in most contexts and provides balanced visibility. lg Larger size for emphasizing important elements or improving touch targets in spacious layouts. xxs xs xl
Progress rings in many sizes from extra-extra-small to extra-large for different UI contexts.
<div nve-layout="row gap:sm pad:md">
<nve-progress-ring status="accent" size="xxs"></nve-progress-ring>
<nve-progress-ring status="accent" size="xs"></nve-progress-ring>
<nve-progress-ring status="accent" size="sm"></nve-progress-ring>
<nve-progress-ring status="accent" size="md"></nve-progress-ring>
<nve-progress-ring status="accent" size="lg"></nve-progress-ring>
<nve-progress-ring status="accent" size="xl"></nve-progress-ring>
</div>
<div nve-layout="row gap:sm pad:md">
<nve-progress-ring status="danger" size="xxs"></nve-progress-ring>
<nve-progress-ring status="danger" size="xs"></nve-progress-ring>
<nve-progress-ring status="danger" size="sm"></nve-progress-ring>
<nve-progress-ring status="danger" size="md"></nve-progress-ring>
<nve-progress-ring status="danger" size="lg"></nve-progress-ring>
</div>
Custom Icon Slotting
The status-icon slot within nve-progress-ring creates a custom loading indicator.
Progress ring with custom status icon slotted in the center for enhanced visual communication.
<div nve-layout="row gap:sm">
<nve-progress-ring status="accent">
<nve-icon name="pause" status="accent"></nve-icon>
</nve-progress-ring>
</div>
When using nve-progress-ring within a nve-button, set the status to neutral to properly inherit button background color.
Progress rings integrated within buttons to show loading states during actions and operations.
<div nve-layout="row gap:sm">
<nve-button>
<nve-progress-ring status="neutral" size="xxs"></nve-progress-ring>
Button
</nve-button>
<nve-button interaction="emphasis">
<nve-progress-ring status="neutral" size="xxs"></nve-progress-ring>
Button
</nve-button>
<nve-button interaction="destructive">
<nve-progress-ring status="neutral" size="xxs"></nve-progress-ring>
Button
</nve-button>
<nve-button>
<nve-progress-ring status="neutral" size="xxs" value="33"></nve-progress-ring>
Button
</nve-button>
<nve-button interaction="emphasis">
<nve-progress-ring status="neutral" size="xxs" value="33"></nve-progress-ring>
Button
</nve-button>
<nve-button interaction="destructive">
<nve-progress-ring status="neutral" size="xxs" value="33"></nve-progress-ring>
Button
</nve-button>
</div>
Button
Button
Button
Button
Button
Button
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