Level Indicator
The Level Indicator component is an element that allows you to view the level or progress of a process. It can be used to display battery level, user progress or other similar tasks.
Basic use
This example shows the level indicator in its simplest form so the default level distribution is easy to read.
Colorize
By adding the colorize attribute, the indicator bars are colored according to the level (low, medium, high).
Sulphur indicator bars
By setting the CSS variable --wje-level-indicator-width to any value, the width of the indicator bars can be set.
Reverse
Adding the reverse attribute will display the indicator bars in reverse order.
When to use
Use wje-level-indicator to communicate status, result of actions, or required next steps immediately.
When not to use
Do not show multiple feedback channels for the same event unless there is a strong reason.
Accessibility
Announce status updates with suitable ARIA live regions and manage focus for modal interactions.
Best Practices
- Match message severity (info/success/warning/error) to actual user impact.
- Use confirmations only for destructive or hard-to-reverse actions.
- Keep timeouts consistent so users have enough time to read messages.
Attributes and Properties
bars
| Description | Retrieves the value of the "bars" attribute, parses it as an integer, and ensures it is at least 1. If the attribute is not set, defaults to 3. |
| Attribute | bars |
| Type | string |
| Default | - |
colorize
| Description | Sets the 'colorize' attribute on the element. If the provided value is truthy, the attribute will be set. If the value is falsy, the attribute will be removed. |
| Attribute | colorize |
| Type | boolean |
| Default | false |
level
| Description | Retrieves the level attribute of an element, with validation to ensure it is within the range of 0 to 3. If the level attribute is not present, the default value is 1. The result is parsed as an integer and constrained to the valid range. |
| Attribute | level |
| Type | string |
| Default | - |
reverse
| Description | Sets the 'reverse' attribute on the element. If the provided value is truthy, the attribute is added; otherwise, the attribute is removed. |
| Attribute | reverse |
| Type | boolean |
| Default | false |
Events
No events available for this component.
Methods
updateBars
| Description | Updates the class of each bar element based on the specified level. |
| Signature | (level: number, bars: Array) => void |
getColor
| Description | Determines the color indicator based on the given level and bars. |
| Signature | (level: number, bars: number) => string ｜ undefined |
CSS Shadow Parts
| Name | Description |
|---|---|
| `` | Styles the element. |
CSS Custom Properties
No CSS custom properties available for this component.
Slots
No slots available for this component.