USER INTERFACE

Progress

How far along something is, and how long is left — bars, rings, steps and waiting states.
THEME
DENSITY
01

Playground

Shape, mode, size, colour and label
IN PROGRESSUploading selects · 42 photos
64%
64%
Drag the slider or press Simulate
VALUE
<ProgressBar value={64} size="M" thickness="reg" tone="brand" label="side" aria-label="Uploading selects" />
Settings
SHAPE
MODE
SIZE · THICKNESS
COLOUR
LABEL
OPTIONS
02

Linear

Bars for tasks, money, storage and media
Labelledtitle · % · meta
Retouching heroes13 / 40
Anna Pikedue Nov 24 · ~3 days left
Stackedone bar · hover a part
Billed this quarter€184,200
Paid · €112.4kSent · €38.6kViewed · €13.5kOverdue · €19.7k
With targettoday marker · ahead / behind
€72.9kof €90k · October
today
Ahead of pace by 26 pts · hits goal Nov 24
Storageamber ≥ 80 % · coral ≥ 95 %
Studio storage1.62 of 2 TB
Running low — 380 GB left
Video bufferplayed · buffered · rest
Parka lookbook — the film0:08 / 0:48
■ played■ bufferedclick to seek
03

Circular

Rings, nested goals, a gauge and inline rings
Ringvalue in the centre · ± to try
81%OF GOAL
On track
Nested ringsthree goals · hover the legend
Revenue81%Projects64%Hours92%
Gaugeload 0–120 % · zones
94%Busy but OK — room for one small shoot
Mini rings in rows22 px · % beside
NTSpring 27 campaign69%
KCWebsite v238%
FOParka lookbook22%
LCOctober retainer100%
MOFrames campaign8%
04

Steps & jobs

Steppers, uploads, exports and onboarding
Stepper · horizontalBack / Next
✓Brief
✓Shoot
3Post
4Delivery
Step 3 of 4 · Post
Stepper · verticaldates · live dot
✓Brief approvedLena signed off v2Sep 19
✓Casting & scoutMývatn, 3 locationsSep 27
✓Shoot3 days, crew of 5Oct 10–12
Post-productionSelects · retouch 13 / 40now
DeliveryFinals + licenceOct 27
File uploadspause · cancel · retry · total
Uploading to Selects
JPGMyvatn_hero_04.jpg24 MB · waiting
ZIPCoast_selects.zip410 MB · waiting
RAWGlacier_RAW_12.cr388 MB · waiting
MP4BTS_cut_v1.mp4640 MB · waiting
0 of 4 files · 0 of 1162 MB0%
Multi-step jobcurrent step · time left · cancel
Export 42 photosOriginals, 2400 px, watermarked0%
Preparing originals42 files
Resizing to 2400 px42 / 42
Adding watermarkAvava · 20 %
Zipping~612 MB
Onboarding checklisttick to complete
Set up your studio3 of 5
05

Waiting

Loaders, a page bar, a progress button and long waits
Loaderspick by expected wait
Spinner1–3 s, small area
Dotstyping, inline
Indeterminateunknown length
Skeletonlayout is known
Under 1 s show nothing. Over 10 s show real progress and a message.
Top page bartrickles to 90 %, completes on load
AVAVA
Overview
Click a link above — the bar trickles while the page “loads”.
Progress buttonthe button becomes the bar
Click — the label becomes the percentage, then a check.
Long waitafter 6 s: reassure · offer to leave
Q4 revenue reportAll clients, Oct–Dec
06

Rules & a11y

Markup, checklist and what to show when
Markup
<!-- determinate -->
<div role="progressbar" aria-label="Uploading selects"
     aria-valuemin="0" aria-valuemax="100" aria-valuenow="64"
     aria-valuetext="64 %, about 1 minute left">…</div>

<!-- indeterminate -->
<div role="progressbar" aria-label="Loading invoices"
     aria-busy="true">…</div>

<!-- finished -->
<p role="status">12 photos uploaded</p>
Checklist7 of 8 checked
PERCENTWork is measurable and steady: uploads, exports, goals.“64 %”
AMOUNTThe unit matters more than the ratio.“1.62 of 2 TB”, “13 / 40”
TIME LEFTLong jobs where people decide whether to wait.“about 2 min left”
NOTHINGUnder 1 s, or when a skeleton already shows the layout.Instant loads
DO✓Pair colour with words — “Running low”✓Slow down near the end instead of jumping✓Let long jobs run in the background with a notification✓Show per-item progress plus a total✓Replace the bar with a clear done state
DON’T✕Loop a determinate bar back to 0✕Use a spinner for something that takes minutes✕Hide Cancel on long operations✕Show decimals — 64 %, not 64.37 %✕Animate when the user asked for reduced motion