Progress bar

How far a job with a known end has got, or how full a reading is, with the figure always there as text.

Refined portWildProgressBar.vueFeedback/Progress BarWProgressBar

Try it

Move the level: the figure changes at once and the fill catches up.

Tank 2 · North Pump

Pump running · full in about 42 min.

Level

Size

Tone

Value

Layout

Striped

Indeterminate

<WildProgressBar
  label="Tank 2 · North Pump"
  :value="12400"
  :max="20000"
  unit="L"
  show-value="percent"
  size="md"
  help="Pump running · full in about 42 min."
/>

On auto, the tank turns to warning under 40% and error under 20%.

When to use

Use it for a job with a known end, such as an upload.
Use it inline, on auto tone, for a reading in a list.

Don’t use it

For one reading against a marked threshold line. Use Progress.
For steps in a flow. Use Progress tracker.
While content loads. Use Skeleton.

Anatomy

Label, value, track and fill, and a help line. Only the track is required.

Backfilling readings · Bore 12

Catching up after 10 days offline.

Soil 30 cm

Soil 60 cm

Soil 90 cm

Inline gives the value at least 52px, so a column of percentages ends on one edge.

Sizes

Four heights. Label, value and help stay 12px at every size.

xs · 4px

File rows

sm · 6px

Table cells

md · 8px

With a label

lg · 12px

A card’s one reading

Tones

Tone says what the work is doing.

Syncing readings · Emu Park

Backfill complete · Bore 12

Uploading logs · North Pump

Signal is weak. It will finish, just more slowly.

Firmware upload · Bore 12

Connection lost at 71%. Try again when Bore 12 is back online.

Paused · Tank sensor 2

Resumes when the logger next checks in.

Give warning and neutral a help line saying what’s wrong.

Auto tone

For readings. Two thresholds, as percentages of the range, set the colour.

Bore 12

North Pump

Weather stn 4

battery · warning 40, error 20

Readings

Logs

Exports

storage · warning 70, error 90

Error below warning means higher is better. Error above warning means higher is worse.

Value

Percent, fraction or your own words. A screen reader hears the same words.

Firmware

percent

Firmware

fraction

Firmware

value-text

Import

0.4 of 100

Import

99.6 of 100

Import

100 of 100

It shows 99% until the end, and at least 1% once started.

States

Queued, moving, waiting and done.

tank-sensor-2.csv

Starts after bore-12.csv.

queued

Importing 1,240 readings

About a minute left.

striped

Waiting for Bore 12

Starts when Bore 12 next checks in.

indeterminate

Import complete

1,240 readings added to Bore 12.

complete

Stripes drift while a job runs. Under reduced motion, indeterminate holds still as a hatch.

In context

Firmware 4.2.1

Bore 12 · Emu Park

Update available

Ready to send

Bore 12 is on 4.1.8.

The badge is a polite live region, so a screen reader hears only the phase changes.

Battery

4 loggers · sorted by site

Bore 12

Emu Park · 4 min ago

North Pump

Emu Park · 11 min ago

Weather station 4

Kinross · 2 h ago

Tank sensor 2

Kinross · 6 min ago

Storage

Storage used

Warning from 70%, error from 90%.

Content

Name the work and its subject: Sending to Bore 12.
Use help for what happens next, such as time left.
Give an error its cause and the fix.

Accessibility

A screen reader hears the label and the value in words, even when the value is hidden. Indeterminate has no value. An error is announced when it appears.

Key	What it does
Tab	Passes over the bar. It never takes focus.

Props

Prop	Type	Default	Description
value	number	—	Progress, in your own units.
min	number	0	Start of the range.
max	number	100	End of the range.
label	string	—	Visible and accessible name.
show-value	'percent' \| 'fraction' \| false	false	What the header shows.
value-text	string	—	Your own words. Wins over show-value.
unit	string	—	Appended to the fraction.
size	'xs' \| 'sm' \| 'md' \| 'lg'	'md'	4, 6, 8 or 12px tall.
tone	'brand' \| 'success' \| 'warning' \| 'error' \| 'neutral' \| 'auto'	'brand'	Auto colours by thresholds.
thresholds	{ warning, error }	{ warning: 80, error: 40 }	Percentages of the range.
layout	'stacked' \| 'inline'	'stacked'	Header above, or all on one line.
help	string	—	The line under the bar.
error	string	—	Turns it red; replaces help.
striped	boolean	false	Moving stripes. md and lg only.
animated	boolean	true	Fill-in, eased changes and moving stripes.
indeterminate	boolean	false	A wait with no figure.
aria-label	string	—	Name when there’s no label.

Tokens

Token	Value	Where it lands
--global-blue-1000	#1877F2	Brand fill.
--global-neutral-grey-300	#F1F1F1	The track.
--global-green-800	#019939	Success fill.
--global-green-900	#018030	Complete value and tick.
--global-squash-1000	#9D6508	Warning fill, value and icon.
--global-red-800	#E12121	Error fill, value and message.
--global-neutral-grey-900	#7F7D83	Neutral fill.
--global-neutral-grey-1000	#4F4D55	Label and help line.
--global-neutral-grey-1300	#0A090B	Value.
--duration-slowest	500ms	Fill-in on mount.
--duration-moderate	200ms	Every change after that.