Circular Progress Bar

A ring of forty ticks that fills in brand blue from the left around the bottom, in three states, with room in the middle for a readout.

DesignReactVuePrompts

Copy

Battery46%1 h 20 min to full

1

2

3

4

5

import { GaugeTrack } from '@orvain/react';
 
<GaugeTrack type="vehicle" state="empty" />
<GaugeTrack type="vehicle" state="half" />
<GaugeTrack type="vehicle" state="completed" aria-label="Gauge complete" />

Add an Orvain Circular Progress Bar in its Half state, with “Battery”, “46%” and “1 h 20 min to full” stacked in its middle.

Orvain MCPIncluded with the library

When to use#

• For a level shown big in a square space, such as a dashboard tile or a device screen.
• When three steps (empty, half, complete) are enough to tell the story.

When not to use

• Use a Line Progress Bar for an exact value or a long task.

Anatomy#

States#

Source#

Preview – final code pending

The Circular Progress Bar is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is publishedGet notified when the source is published

Used in these blocks