Progress | omverse-ui

Overview

Linear · circular · segmented · multi · battery · glow · bubble

Progress sizes

Live preview

Show determinate progress when the system can estimate how much work is complete.

XS progress65%

SM progress65%

MD progress65%

LG progress65%

XL progress65%

ProgressExample.tsx

tsx

1<Progress value={65} size="xs" />
2<Progress value={65} size="sm" />
3<Progress value={65} size="md" />
4<Progress value={65} size="lg" />
5<Progress value={65} size="xl" />

Use progress indicators for operations with a meaningful duration. Pair the visual with a clear label and, when useful, a numeric value.

Anatomy

Root container and spacing boundary.
Primary content and optional secondary metadata.
State indicators and utility affordances (icons, badges, controls).
Optional helper text, grouping, and behavioral wrappers.

When to use

Choose Progress when a repeated, structured interaction is required.
Use it for clear, consistent operations across similar surfaces.
Use in forms, lists, and action workflows where clarity matters.

When not to use

Do not use only for decorative layout without interaction meaning.
Avoid duplicating the same behavior without distinct user context.
Prefer simpler HTML or textual content for static, non-interactive labels.

Variants

Component variants should be documented by API props and examples below.

States

Common states include idle, active, disabled, focused, and loading/pending states where applicable.

Behavior

Behavior should remain deterministic and keyboard-friendly, with clear visual feedback for every state transition.

Accessibility

Use semantic structure and visible labels whenever possible.
Preserve keyboard navigation and focus visibility.
Announce status and changes when context requires it.

Content guidelines

Prefer short, clear labels.
Keep content actions scannable and outcome-oriented.
Use consistent wording across similar components.

Examples

Sizes

Live preview

Five track heights: xs, sm, md (default), lg, xl

App.tsx

tsx

1<Progress value={65} size="xs" />
2<Progress value={65} size="sm" />
3<Progress value={65} size="md" />
4<Progress value={65} size="lg" />
5<Progress value={65} size="xl" />

Colors

Live preview

Six color variants — default, secondary, success, warning, error, and gradient

App.tsx

tsx

1<Progress value={70} color="default"   />
2<Progress value={55} color="secondary" />
3<Progress value={85} color="success"   />
4<Progress value={45} color="warning"   />
5<Progress value={30} color="error"     />
6<Progress value={75} variant="gradient" />

Variants

Live preview

default · gradient · glow · striped · indeterminate · bubble · thin

Default65%

Gradient75%

Glow80%

Striped60%

Indeterminate

Bubble tooltip

65%

Ultra thin

App.tsx

tsx

1<Progress value={65} label="Default"       showValue="percent" size="md" />
2<Progress value={75} variant="gradient"    label="Gradient"    showValue="percent" size="md" />
3<Progress value={80} variant="glow"        label="Glow"        showValue="percent" size="md" color="success" />
4<Progress value={60} variant="striped"     label="Striped"     showValue="percent" size="md" />
5<Progress              variant="indeterminate" label="Indeterminate" size="md" />
6 
7{/* Bubble needs an overflow-visible wrapper for the floating tooltip */}
8<div style={{ paddingTop: 32, overflow: 'visible' }}>
9  <Progress value={65} variant="bubble"   label="Bubble tooltip" size="md" />
10</div>
11 
12<Progress value={65} variant="thin"       label="Ultra thin"  size="xs" />

With label + helper text

Live preview

label and helperText add context; valueLabel overrides the auto percentage

Storage used65%

6.5 GB of 10 GB used

Profile completion8/10 tasks

Add your bio and profile photo to complete

CPU Usage0%

High usage detected

App.tsx

tsx

1<Progress
2  value={65}
3  variant="glow"
4  label="Storage used"
5  showValue="percent"
6  helperText="6.5 GB of 10 GB used"
7  size="md"
8/>
9 
10{/* valueLabel overrides the auto percentage with custom text */}
11<Progress
12  value={80}
13  variant="gradient"
14  label="Profile completion"
15  valueLabel="8/10 tasks"
16  showValue="percent"
17  helperText="Add your bio and profile photo to complete"
18  size="md"
19  color="success"
20/>
21 
22{/* Animated entry — value starts at 0, animates to 75 */}
23<Progress
24  value={animated}
25  variant="glow"
26  color="error"
27  label="CPU Usage"
28  showValue="percent"
29  helperText="High usage detected"
30  size="lg"
31/>

Segmented

Live preview

SegmentedProgress divides the bar into discrete blocks — supports per-segment colors

Step 3 of 53 / 5

Weekly goal5 / 7

Multi-color segments3 / 4

App.tsx

tsx

1{/* Step indicator */}
2<SegmentedProgress total={5} value={3} label="Step 3 of 5" />
3 
4{/* Weekly goal — success color, larger size */}
5<SegmentedProgress total={7} value={5} color="success" label="Weekly goal" size="lg" />
6 
7{/* Per-segment colors */}
8<SegmentedProgress
9  total={4}
10  value={3}
11  segmentColors={{ 0: 'success', 1: 'success', 2: 'warning', 3: 'error' }}
12  label="Multi-color segments"
13/>

Circular

Live preview

CircularProgress renders an SVG arc — showValue is true by default

65%

85%

30%

75%

50%

100%

App.tsx

tsx

1{/* Default */}
2<CircularProgress value={65} size={80} />
3 
4{/* Colors */}
5<CircularProgress value={85} size={80} color="success" />
6<CircularProgress value={30} size={80} color="error"   />
7 
8{/* Gradient — larger */}
9<CircularProgress value={75} size={100} gradient showValue />
10 
11{/* Warning */}
12<CircularProgress value={50} size={70}  color="warning" />
13 
14{/* Complete */}
15<CircularProgress value={100} size={80} color="success" />

Multi-color stacked

Live preview

MultiProgress stacks segments end-to-end — showLegend adds a color key

Project allocation

Design 45%

Dev 30%

QA 15%

Budget breakdown

Salaries 40%

Marketing 25%

Infrastructure 20%

Other 10%

App.tsx

tsx

1{/* Project allocation */}
2<MultiProgress
label="Project allocation"
segments={[
  { value: 45, color: 'default',   label: 'Design' },
  { value: 30, color: 'secondary', label: 'Dev' },
  { value: 15, color: 'success',   label: 'QA' },
]}
showLegend
size="lg"
11/>
12 
13{/* Budget breakdown */}
14<MultiProgress
label="Budget breakdown"
segments={[
  { value: 40, color: 'default', label: 'Salaries' },
  { value: 25, color: 'warning', label: 'Marketing' },
  { value: 20, color: 'success', label: 'Infrastructure' },
  { value: 10, color: 'error',   label: 'Other' },
]}
showLegend
size="md"
24/>

File upload simulation

Live preview

Progress variant switches from default → striped (uploading) → glow (complete)

design-system-v2.zip

48 MB

App.tsx

tsx

1const [uploading, setUploading] = useState(false)
2const [uploadPct, setUploadPct] = useState(0)
3 
4function simulateUpload() {
setUploading(true)
setUploadPct(0)
const interval = setInterval(() => {
  setUploadPct(p => {
    if (p >= 100) { clearInterval(interval); setUploading(false); return 100 }
    return p + Math.random() * 12
  })
}, 300)
13}
14 
15<div style={{ border: '1px solid var(--color-border)', borderRadius: 12, padding: 20 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
  <div>
    <p style={{ fontSize: 14, fontWeight: 600 }}>design-system-v2.zip</p>
    <p style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>48 MB</p>
  </div>
  <span style={{
    fontSize: 14, fontWeight: 700,
    color: uploadPct >= 100 ? 'var(--color-success)' : 'var(--color-primary)',
  }}>
    {uploadPct >= 100 ? '✓ Done' : `${Math.round(uploadPct)}%`}
  </span>
</div>
<Progress
  value={Math.min(uploadPct, 100)}
  variant={uploading ? 'striped' : uploadPct >= 100 ? 'glow' : 'default'}
  color={uploadPct >= 100 ? 'success' : 'default'}
  size="md"
/>
<button
  onClick={simulateUpload}
  disabled={uploading}
  style={{ marginTop: 16, padding: '8px 16px', borderRadius: 8 }}
>
  {uploading ? 'Uploading...' : uploadPct >= 100 ? 'Upload again' : 'Simulate upload'}
</button>
41</div>

Skill bars

Live preview

Combine color and label for a skills or proficiency breakdown

React

95%

TypeScript

88%

Design

72%

Node.js

65%

DevOps

48%

App.tsx

tsx

1const skills = [
{ skill: 'React',      value: 95, color: 'default'   },
{ skill: 'TypeScript', value: 88, color: 'secondary' },
{ skill: 'Design',     value: 72, color: 'success'   },
{ skill: 'Node.js',    value: 65, color: 'warning'   },
{ skill: 'DevOps',     value: 48, color: 'error'     },
7]
8 
9{skills.map(({ skill, value, color }) => (
<div key={skill} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
  <span style={{ width: 88, flexShrink: 0, fontSize: 13, color: 'var(--color-text-secondary)' }}>
    {skill}
  </span>
  <Progress value={value} color={color} size="md" style={{ flex: 1 }} />
  <span style={{ width: 32, textAlign: 'right', fontSize: 12, color: 'var(--color-text-secondary)' }}>
    {value}%
  </span>
</div>
19))}

Progress props

SegmentedProgress props

CircularProgress props

MultiProgress props

Props / API

Api Props

Props

PropTypeDefaultDescription

valuenumber—Progress value 0–max

maxnumber100Maximum value

size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Track height

labelstring—Label shown above the bar

helperTextstring—Helper text shown below the bar

showValue'percent' | 'fraction' | 'none''none'Format for the value shown above the bar

valueLabelstring—Custom value label — overrides the auto-generated value text

formatValue(value: number) => string—Custom value formatter function

valuenumber—Number of filled segments

totalnumber10Total number of segments

segmentColorsPartial<Record<number, ProgressColor>>—Per-segment color by index

size'sm' | 'md' | 'lg''md'Segment height

labelstring—Label shown above with count

valuenumber0Progress value 0–100

sizenumber80Diameter in px

strokeWidthnumber8Width of the arc stroke

gradientbooleanfalseApplies a primary→secondary gradient to the arc

showValuebooleantrueShows the percentage in the center

centerLabelstring—Custom text label in the center (replaces percentage)

segments{ value: number; color: ProgressColor; label?: string }[]—Array of stacked segments

maxnumber100Maximum total value

size'sm' | 'md' | 'lg''md'Track height

labelstring—Label shown above the bar

showLegendbooleanfalseShows a color-coded legend below the bar