Progress bar
The Progress Bar element is a component designed to visualize progress. It offers the ability to create customizable circular or straight indicators with different configuration options.
Basic usage
To use the Progress Bar component, include it in the HTML with the required attributes. The progress attribute sets the percentage value of the progress in the progress bar.
Type
Two types of progress bars are supported. Add the type property with the value "circle" to display a progress bar with a circular design.
Label
To display labels at the progress bar, it is necessary to insert a Label element inside it and define its position by adding the slot attribute with the value "start" or "end".
Linecap
Add the linecap property with the value "round" to display a progress bar with a rounded end.
Radius
The radius attribute determines the diameter of the round progress bar.
Stroke
The stroke attribute defines the width of the progress bar in pixels.
Progress bar with picture
To display an image inside an element, you need to wrap the image in the progress bar of the element.
Color variants of the progress bar
The color property modifies the color of the element. By default, the element has the color dark. Setting this value changes the element color to one of the colors of the preset color palette.
Theming colors
Even the smaller circular variants can reuse the same progress value across different semantic colors depending on the process state or result.
When to use
Use wje-progress-bar when you need to show the current progress of loading, processing, or another task in either a linear or circular form.
When not to use
Do not rely on it alone when users need an exact textual status. In those cases, pair it with a clear label or additional text.
Accessibility
The component sets the progressbar role, so it is important that progress reflects the real task state and that important steps are still explained in text when needed.
Best Practices
- Keep the same indicator style within a single flow unless there is a clear reason to switch between linear and circular variants.
- If progress meaning matters for decisions, supplement it with text or labels in the
startandendslots. - Use color variants to reinforce meaning, not as the only source of meaning.
Attributes and Properties
linecap
| Description | Sets the line ending style used by the progress indicator. |
| Attribute | linecap |
| Type | string |
| Default | square |
progress
| Description | Sets the progress value displayed by the bar. |
| Attribute | progress |
| Type | number |
| Default | - |
radius
| Description | Sets the radius used for circular progress-bar variants. |
| Attribute | radius |
| Type | number |
| Default | 70 |
stroke
| Description | Sets the stroke width of the rendered progress indicator. |
| Attribute | stroke |
| Type | number |
| Default | 6 |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
| Name | Description |
|---|---|
--wje-progress-bar-color | Sets the color of the progress bar. This property controls the fill color of the progress indicator. Accepts any valid CSS color value, such as named colors (red), hex values (#ff0000), or CSS variables. |
--wje-progress-bar-text-size | Defines the font size of the text displayed within the progress bar. Accepts any valid CSS length unit (e.g., rem, px, em) to control text size relative to the bar's design. |
--wje-progress-bar-text-color | Specifies the color of the text displayed within the progress bar. Accepts any valid CSS color value to ensure contrast and readability against the progress bar's background. |
Slots
| Name | Description |
|---|---|
default | The default slot for the progress bar. |
start | The start slot of the progress bar. |
end | The end slot of the progress bar. |