Progress

One reading judged against a threshold, such as soil moisture against its refill point.

Refined portWildProgress.vueFeedback/ProgressMeasureBar, BarPill

Try it

Walk the value across the threshold, then move the readout to the head of the fill.

42%

Colour

Value

Readout

Threshold

Scale

<MeasureBar
  label="Soil moisture"
  pct={42}
  value="42"
  unit="%"
  threshold={50}
  fill={RAMP.green[800]}
  fillBelow={RAMP.squash[1000]}
  scale={['0', '50', '100']}
/>

The figure and colour change at once and the fill follows, so the reading is never late.

When to use

Progress is a 32px instrument for one reading against a threshold. For a job with an end, use the slim Progress bar.

Use it for a reading judged against a threshold, such as soil moisture against its refill point.
Stack one bar per reading, so the figures line up in one column.

Don’t use it

For a job with an end, such as an upload or a firmware update. Use Progress bar.
For a bar inside a table row or a list. Use Progress bar, inline.
For a whole probe profile in one gauge. Use the soil rail.
While content loads. Use Skeleton.

Threshold

A black line marks the point the reading is judged against. Pass fillBelow so the bar changes colour under the line. Keep the line clear of an end readout, which sits over it.

34%

71%

<MeasureBar label="Soil moisture" pct={34} threshold={50} fill={RAMP.green[800]} fillBelow={RAMP.squash[1000]} value="34" unit="%" scale={['0', '50', '100']} />
<MeasureBar label="Soil moisture" pct={71} threshold={50} fill={RAMP.green[800]} fillBelow={RAMP.squash[1000]} value="71" unit="%" scale={['0', '50', '100']} />

The line keeps a white edge, so it reads on the track and on any fill.

Readout

The value sits in a white pill, so it reads over the fill and the track alike.

18%

42%

68%

18%

<MeasureBar label="Soil moisture" pct={18} value="18" unit="%" />
<MeasureBar label="Soil moisture" pct={42} value="42" unit="%" />
<MeasureBar label="Soil moisture" pct={68} value="68" unit="%" />
<MeasureBar label="Soil moisture" pct={18} value="18" unit="%" readoutAt="head" />

Keep the readout at the end in a stack, so the figures form a column. Use head on a lone bar.

Compact readout

42.1%

value

17.4°C

with unit

3,184

bare

<BarPill value="42.1" unit="%" />

Where only the figure matters, show the readout alone in the same pill.

Content

Name the reading in label, such as “Soil moisture”.
Put the figure in value and its unit in unit, so the unit sets lighter.
Give every bar in a stack the same unit and decimal places.

Accessibility

The bar is a meter: a screen reader hears its label and the readout, such as “34%”. Under reduced motion the fill doesn’t sweep or ease.

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

Props

Prop	Type	Default	Description
label	string	—	Required accessible name, such as the reading.
pct	number	—	Fill, from 0 to 100.
value	string	—	The readout. Leave out for a bare bar.
unit	string	—	Shown after the value, in lighter ink.
readoutAt	'end' \| 'head'	'end'	Readout at the track end, or at the fill's end.
threshold	number	—	Where the black line sits, from 0 to 100.
fill	string	blue-1000	Fill colour; with fillBelow, only at or over the threshold.
fillBelow	string	—	Fill colour under the threshold.
track	string	grey-300	Track colour.
scale	string[]	—	Marks under the bar, at even positions.

BarPill The readout on its own.

Prop	Type	Default	Description
value	string	—	The figure, already formatted.
unit	string	—	Shown after the value, in lighter ink.

Tokens

Token	Value	Where it lands
--global-blue-1000	#1877F2	Default fill.
--global-green-800	#019939	Fill at or over the threshold.
--global-squash-1000	#9D6508	Fill under the threshold.
--global-neutral-grey-300	#F1F1F1	The track.
--global-neutral-grey-1300	#0A090B	Threshold line and value.
--global-neutral-grey-1000	#4F4D55	Scale marks and unit.
--global-base-white	#FFFFFF	Readout pill and threshold edge.
--radius-md	6px	Track and pill corners.
--font-weight-extrabold	700	Readout value.
(no token)	32px	Track height.
(no token)	800ms	Fill sweep and change.