ba-progress-meter
The progress meter gives users a clear, visual sense of their position relative to a goal or threshold.
Airframe
Web Components
React
React Native
Anatomy
Label
Describes what the progress meter is representing
Hint text
Some extra text that gives more context to the element
Progress value
The current value of the progress meter
Progress meter bar
The remaining value of the progress meter
Value
The value of the progress meter in plain english
Design Documentation
Use when the user benefits from seeing it in relation to a total. For example, loyalty points earned toward a tier.
Do not use for multi-step flows or form completion, for this use our progress bar component instead. Also, do not use it for indeterminate loading states, for that use our loading skeleton component.
Live Demo
<ba-progress-metre
label="Tier points"
hint-text="You have 1,000 points to go until your next tier"
value="1000"
max="2000">
</ba-progress-metre>
Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
barColor |
bar-color |
The color of the progress bar | "default" | "the-club-blue" | "the-club-bronze" | "the-club-gold" | "the-club-gold-guest-list" | "the-club-premier" | "the-club-silver" | undefined |
'default' |
hintText |
hint-text |
Hint text to show alongside the progress meter | string | undefined |
undefined |
label(required) |
label |
The label to show above the progress meter | string |
undefined |
max |
max |
The value of the progress meter | string | undefined |
undefined |
size |
size |
The size of progress meter to show | "compact" | "default" | undefined |
'default' |
value(required) |
value |
The value of the progress meter | string |
undefined |
Permitted ARIA roles
- None
Slots
No slotted content available for this component.
Parent components
ba-progress-meter can be slotted into:
Usage
Basic usage
Basic usage showing the label, hint text and the value
<ba-progress-metre
label="Tier points"
hint-text="80 points till next tier"
value="20">
</ba-progress-metre>Using the small size version
A smaller size progress bar can be used by using the size prop with a value of small
<ba-progress-metre
label="Tier points"
hint-text="80 points till next tier"
value="20"
size="small">
</ba-progress-metre>Changing the value to not use a percentage
The shown value can be changed to not use a percentage by using the max prop.
<ba-progress-metre
label="Tier points"
hint-text="80 points till next tier"
value="20"
size="small"
max="100">
</ba-progress-metre>Guidelines
When using the progress-meter on themed backgrounds, the colour contrast ratio of the text is handled automatically by BAgel. If a different bar colour is set via the bar-color property, this is not handled by BAgel, you must check that the bar colour does not clash with the background.
It's acceptable if the bar colour doesn't meet the required contrast ratio, since the bar is purely decorative. The user can still get all the necessary information from the text supplied by the component.
Further reading:
Always use the label attribute to provide an accessible label to the progress bar. This gives all users meaningful context to what the progress bar represents.
Further reading:
Keyboard navigation
No keyboard interactions have been defined for this component.
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- A meaningful label has been used
- If using hint-text make sure it is concise and descriptive
Accessibility checklist
- Progress meter has discernible, descriptive text
- Progress meter is reachable using assistive technology
- If setting a color for the progress bar, make sure it meets the correct colour contrast requirements
These checks are handled by the component and do not need to be repeated each time it is used.
- Colour contrast for all states in all BAgel themes
- Animations respect users' reduced motion settings
- High contrast mode adjustments