Progress Bar

Linear Progress Bar

Thin linear progress indicator (h:4px, border-radius:999px). Three Figma themes: Brand (#892CDC), Offer (ocean-blue gradient), and Success (green gradient). Track colour is #EAEAF1. Label sits above; percentage on the right.

V 1.0View in Storybook
Controls
Value
50
Theme
Show %
Animated
Uploading50%

Variants

All Themes × StatesBrand, Offer, and Success at Low / Medium / High fill

Brand

Low
Medium
High

Offer

Low
Medium
High

Success

Low
Medium
High
With LabelLabel text above + percentage on the right
Uploading57%
Offers57%
Steps completion57%
Animated ShimmerPurple shimmer animation — use for indeterminate loading states
Uploading…60%

Props

Name
Type
Default
value*
number
—
max
number
100
theme
'brand' | 'offer' | 'success'
'brand'
label
string
—
showLabel
boolean
false
animated
boolean
false

Code

import { ProgressBar } from '@/src/components/Progress/Progress'

// Brand (default)
<ProgressBar value={50} theme="brand" label="Uploading" showLabel />

// Offer — ocean-blue gradient
<ProgressBar value={50} theme="offer" label="Offers" showLabel />

// Success — green gradient
<ProgressBar value={50} theme="success" label="Steps completion" showLabel />

// Animated shimmer
<ProgressBar value={70} theme="brand" animated />

Usage guidelines

When to use
  • Use to communicate a known percentage of completion — file uploads, profile setup, checkout steps.
  • Use the Brand theme for primary app actions.
  • Use the Offer theme for deal/discount progress.
  • Use the Success theme for completion milestones like onboarding flows.
  • Enable showLabel when the exact percentage is meaningful to the user.
  • Enable animated shimmer only for indeterminate or slow-moving progress where exact % is unknown.
When not to use
  • Don't use for step-based flows with discrete states — use Segmented or Stepper instead.
  • Don't combine the animated shimmer with showLabel; the percentage would be misleading.
  • Don't use multiple progress bars of different themes in close proximity — pick one per context.
  • Avoid placing a progress bar inside a button or chip.