Progress bar

<zeno-progress-bar>FeedbackSource

Shows how much of a task is done.

import '@usezeno/tokens/css';
import '@usezeno/core/web-components';

Examples

Label and value

The label is shown above the bar and names it. show-value adds the percentage next to the label.

<zeno-progress-bar label="Uploading report.pdf" value="40" show-value></zeno-progress-bar>

Variants

The variant only changes the colour, so say what it means in the label.

<zeno-progress-bar variant="primary" label="Storage used" value="35" show-value></zeno-progress-bar>
<zeno-progress-bar variant="success" label="Backup complete" value="100" show-value></zeno-progress-bar>
<zeno-progress-bar variant="warning" label="Storage almost full" value="85" show-value></zeno-progress-bar>
<zeno-progress-bar variant="error" label="Upload failed" value="60" show-value></zeno-progress-bar>
<zeno-progress-bar variant="info" label="Syncing contacts" value="50" show-value></zeno-progress-bar>

Sizes

The track is 4px, 8px or 12px high. max sets the value that counts as full.

<zeno-progress-bar size="sm" label="Small" value="3" max="10"></zeno-progress-bar>
<zeno-progress-bar size="md" label="Medium" value="5" max="10"></zeno-progress-bar>
<zeno-progress-bar size="lg" value="7" max="10"></zeno-progress-bar>

Striped and indeterminate

animated moves the stripes and only works together with striped. Use indeterminate when the amount of work is not known.

<zeno-progress-bar label="Installing update" value="65" striped animated></zeno-progress-bar>
<zeno-progress-bar label="Connecting to the server" indeterminate></zeno-progress-bar>

Segments and your own value text

segments splits the bar into equal steps. formatValue is a function, so set it as a property.

<zeno-progress-bar label="Account setup" value="2" max="5" segments="5" show-value></zeno-progress-bar>

document.querySelector('zeno-progress-bar').formatValue = (value, max) =>
  'Step ' + value + ' of ' + max;

Attributes and properties

Property	Attribute	Type	Default	Description
value	value	number	0
max	max	number	100
variant	variantreflects	'primary' | 'success' | 'warning' | 'error' | 'info'	'primary'
size	sizereflects	'sm' | 'md' | 'lg'	'md'
label	label	string	–
showValue	show-valuereflects	boolean	false
striped	stripedreflects	boolean	false
animated	animatedreflects	boolean	false
indeterminate	indeterminatereflects	boolean	false
segments	segments	number	–
formatValue	formatvalue	(_value: number, _max: number) => string	–
testId	–	string	–	Test ID for automated testing From ZenoElement.

Methods

Method	Description
focus(): void	Focus the component or its first focusable element From ZenoElement.
blur(): void	Blur the component or its focused element From ZenoElement.

Events

This element sends no events.

Slots

This element has no slots.

CSS parts

Part
bar
base
info
label
segment
track
value
wrapper

CSS custom properties

This element documents no custom properties of its own. Style it through its parts and through the tokens it reads.

The element's own source reads no tokens.

Accessibility

Keyboard

This element handles no keys of its own.

Forms

This element is not a form control. It adds nothing to a form's data.

Notes

• The filled part of the bar has role="progressbar" with aria-valuenow, aria-valuemin="0" and aria-valuemax set from value and max.
• The bar is named by the aria-label of the element, then by label, then by the word “Progress”.
• The element is not focusable and adds no keyboard behaviour.
• With reduced motion the stripes and the indeterminate bar do not move.

Tests and known gaps

• No tests of its own. The only check is that the element registers and renders (smoke.test.ts).
• Not checked with axe-core.
• Has no Storybook story.

19 of the 22 properties, methods, events, slots and parts above have no description in the source

• the property value
• the property max
• the property variant
• the property size
• the property label
• the property showValue
• the property striped
• the property animated
• the property indeterminate
• the property segments
• the property formatValue
• the part bar
• the part base
• the part info
• the part label
• the part segment
• the part track
• the part value
• the part wrapper

Known gaps:

• With segments there is no progressbar role, no value and no name. Assistive technology only gets the visible label text.
• segments="1" shows an empty track with no bar at all.
• An indeterminate bar still reports aria-valuenow. For unknown progress the attribute should be left out.
• aria-valuenow is the raw value. A value below 0 or above max is reported as it is, while the drawn bar is limited to the track.
• show-value without a label shows nothing at the sm and md sizes.
• At size="lg" the label is drawn inside the track and replaces the value, so show-value has no effect when a label is set.
• At size="lg" the text sits inside a 12px track that clips its content. It also keeps one text colour on both the filled and the empty part of the bar.
• The text from formatValue is only visible. The bar has no aria-valuetext, so assistive technology still gets the plain number.
• formatValue is also exposed as an attribute. An attribute gives a string, and the element then fails when it tries to call it.
• The fallback name “Progress” is English only.
• The bar does not animate when value changes. The transition value is not valid CSS.
• With reduced motion an indeterminate bar is a still bar at 30%, which looks like real progress.
• striped, animated and indeterminate do nothing together with segments, and animated does nothing without striped. The element gives no warning.