Progress Bars
Progress bars are tracks with a fill that report where something stands as a share of a whole the reader can see. The five compositions here stretch that further than a loading bar. A stepped compression control lands a square knob on one of five stops, a spending meter runs a second bar behind the first, a semicircular ring of segments carries a level stepper, an intensity bar is scaled from low to high, and a dial reads its highlighted arc as an angle.
What separates them is who owns the value. Every one of these can be dragged or stepped, which makes them controls that happen to look like meters, and a control owes things a readout does not: a handle you can see, keyboard steps, and a value read back as a number. The inverse matters more. A quota meter is not progress. Nothing is completing, so a full bar means the ceiling has been hit, and drawing that like a finished download says the opposite of the truth.
Compression Progress Bar
Best for
File compression, quality sliders, stepped settings
Anatomy
5-stop pill slider · draggable square knob · tick marks · a computed value readout
Spending Progress Bar
Best for
Budgets, quota meters, usage-vs-limit dashboards
Anatomy
Draggable hatched fill bar · a synced secondary bar · a computed spent-of-total footer · Manage link
Monthly spend
70%
$105 out of $150 spent
Graph Progress Bar
Best for
Capacity dials, radial KPI meters, level gauges
Anatomy
21-segment semicircular dash ring · centered stat · trend pill · +/- level stepper
120
New customers
Your customer volume has increased by
15%Intensity Progress Bar
Best for
Sensitivity controls, difficulty sliders, effect strength
Anatomy
Draggable fill bar with a pill handle · Low/High tick scale · live percentage
Intensity
52%
Gauge Progress Bar
Best for
Roll/tilt indicators, telemetry dials, vehicle dashboards
Anatomy
Dark dial card · 40-dash ring with a highlighted arc · centered icon · +/- angle stepper
Roll
−4°
Max: 35°
Usage against a target
Best for
Plan limits and quotas, where the target matters as much as the cap
Anatomy
Meter switch · figure of total · bar with hatched remainder · target marker and tag · tick meter · change against last month
Readings in their normal range
Best for
Lab results and any reading judged against its own reference range
Anatomy
Name and reference range · hatched scale with the normal band · the reading as a dot · value and High, Low or Normal tag · flagged-only filter
- PotassiumNormal 3.5–5.3 mmol/L5.8 mmol/LHigh
- SodiumNormal 135–145 mmol/L139 mmol/LNormal
- Glucose, fastingNormal 3.9–5.6 mmol/L5.1 mmol/LNormal
- HaemoglobinNormal 120–160 g/L118 g/LLow
- CreatinineNormal 60–110 µmol/L84 µmol/LNormal
Using Progress Bars
Reach for it when
- A multi-step flow where the person should see how many steps remain
- A quota or budget shown against the ceiling it is measured from
- A setting with a continuous range whose value is worth reading back
- A single operation whose total size is known before it starts
Reach for something else when
- The total is unknown: a spinner or an elapsed counter is honest where a guessed fill is not
- You are comparing several values against each other. That is a bar chart
- The exact number matters to the person setting it: pair the track with a number field or a stepper
Where it shows up
Storage and seat quotas
An account page showing space used against the plan's ceiling, with a second bar behind the first for what is pending. The footer states both figures so nobody has to estimate the fill by eye.
Checkout step meter
A multi-step purchase or signup where the bar answers the only question anyone has at step two, which is how many more there are. Steps are countable, so the fill is exact rather than estimated.
Compression settings
Export and encoding dialogs where quality is picked along a handful of named stops rather than a free range. The knob lands on a stop and the readout names it, so the value is never stranded between two labels.
Telemetry dials
Vehicle and robotics dashboards where a value swings around a centre instead of filling from zero. The arc reads as an angle, and the stepper beside it lets the same control be nudged by hand during setup.
Questions
When should a progress bar be used instead of a spinner?
Use a progress bar when the total is known and the fill can be trusted: a file of known size, a form with a fixed number of steps, a quota against its limit. Use a spinner when there is no total to divide by. A bar whose fill is guessed is worse than a spinner, because it makes a promise about time that it then breaks.
How do you make a progress bar accessible?
A bar that only reports should expose a progressbar role carrying its current, minimum and maximum values, so assistive technology can announce the position without reading pixels. One the person can change is a slider instead: it takes keyboard focus, moves on the arrow keys, and announces the new value after each step. Never let colour alone signal that a value has passed its limit.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPProgress Bars
Progress bars are tracks with a fill that report where something stands as a share of a whole the reader can see. The five compositions here stretch that further than a loading bar. A stepped compression control lands a square knob on one of five stops, a spending meter runs a second bar behind the first, a semicircular ring of segments carries a level stepper, an intensity bar is scaled from low to high, and a dial reads its highlighted arc as an angle.
What separates them is who owns the value. Every one of these can be dragged or stepped, which makes them controls that happen to look like meters, and a control owes things a readout does not: a handle you can see, keyboard steps, and a value read back as a number. The inverse matters more. A quota meter is not progress. Nothing is completing, so a full bar means the ceiling has been hit, and drawing that like a finished download says the opposite of the truth.
Compression Progress Bar
Best for
File compression, quality sliders, stepped settings
Anatomy
5-stop pill slider · draggable square knob · tick marks · a computed value readout
Spending Progress Bar
Best for
Budgets, quota meters, usage-vs-limit dashboards
Anatomy
Draggable hatched fill bar · a synced secondary bar · a computed spent-of-total footer · Manage link
Monthly spend
70%
$105 out of $150 spent
Graph Progress Bar
Best for
Capacity dials, radial KPI meters, level gauges
Anatomy
21-segment semicircular dash ring · centered stat · trend pill · +/- level stepper
120
New customers
Your customer volume has increased by
15%Intensity Progress Bar
Best for
Sensitivity controls, difficulty sliders, effect strength
Anatomy
Draggable fill bar with a pill handle · Low/High tick scale · live percentage
Intensity
52%
Gauge Progress Bar
Best for
Roll/tilt indicators, telemetry dials, vehicle dashboards
Anatomy
Dark dial card · 40-dash ring with a highlighted arc · centered icon · +/- angle stepper
Roll
−4°
Max: 35°
Usage against a target
Best for
Plan limits and quotas, where the target matters as much as the cap
Anatomy
Meter switch · figure of total · bar with hatched remainder · target marker and tag · tick meter · change against last month
Readings in their normal range
Best for
Lab results and any reading judged against its own reference range
Anatomy
Name and reference range · hatched scale with the normal band · the reading as a dot · value and High, Low or Normal tag · flagged-only filter
- PotassiumNormal 3.5–5.3 mmol/L5.8 mmol/LHigh
- SodiumNormal 135–145 mmol/L139 mmol/LNormal
- Glucose, fastingNormal 3.9–5.6 mmol/L5.1 mmol/LNormal
- HaemoglobinNormal 120–160 g/L118 g/LLow
- CreatinineNormal 60–110 µmol/L84 µmol/LNormal
Using Progress Bars
Reach for it when
- A multi-step flow where the person should see how many steps remain
- A quota or budget shown against the ceiling it is measured from
- A setting with a continuous range whose value is worth reading back
- A single operation whose total size is known before it starts
Reach for something else when
- The total is unknown: a spinner or an elapsed counter is honest where a guessed fill is not
- You are comparing several values against each other. That is a bar chart
- The exact number matters to the person setting it: pair the track with a number field or a stepper
Where it shows up
Storage and seat quotas
An account page showing space used against the plan's ceiling, with a second bar behind the first for what is pending. The footer states both figures so nobody has to estimate the fill by eye.
Checkout step meter
A multi-step purchase or signup where the bar answers the only question anyone has at step two, which is how many more there are. Steps are countable, so the fill is exact rather than estimated.
Compression settings
Export and encoding dialogs where quality is picked along a handful of named stops rather than a free range. The knob lands on a stop and the readout names it, so the value is never stranded between two labels.
Telemetry dials
Vehicle and robotics dashboards where a value swings around a centre instead of filling from zero. The arc reads as an angle, and the stepper beside it lets the same control be nudged by hand during setup.
Questions
When should a progress bar be used instead of a spinner?
Use a progress bar when the total is known and the fill can be trusted: a file of known size, a form with a fixed number of steps, a quota against its limit. Use a spinner when there is no total to divide by. A bar whose fill is guessed is worse than a spinner, because it makes a promise about time that it then breaks.
How do you make a progress bar accessible?
A bar that only reports should expose a progressbar role carrying its current, minimum and maximum values, so assistive technology can announce the position without reading pixels. One the person can change is a slider instead: it takes keyboard focus, moves on the arrow keys, and announces the new value after each step. Never let colour alone signal that a value has passed its limit.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
