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.
Colour 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.
Attributes and Properties
color
| Description | The color to use from your application's color palette. The default options are: "primary", "complete", "success", "warning", "warning", "light", and "dark". For more information, go to: theming. |
| Attribute | color |
| Type | "danger." ｜ "dark" ｜ "primary" ｜ "success" ｜ "light" ｜ "complete" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
linecap
| Description | Defines a waveform indicator with a rounded end. |
| Attribute | linecap |
| Type | boolean |
| Default | false |
progress
| Description | Specifies the value of the waveform in percentage. |
| Attribute | progress |
| Type | number |
| Default | 0 |
radius
| Description | Specifies the value of the waveform in percentage. |
| Attribute | radius |
| Type | number |
| Default | 70 |
stroke
| Description | Specifies the value of the waveform in percentage. |
| Attribute | stroke |
| Type | number |
| Default | 12 |
type
| Description | Add a type property with the value "circle" to display a progress bar with a circular design. |
| Attribute | type |
| Type | string |
| Default | undefined |
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 |
|---|---|
--wj-progress-bar-color | Defines the colour of the progress bar |
--wj-progress-bar-text-size | Defines the size of the text |
Slots
| Name | Description |
|---|---|
end | The content is placed on the right in the LTR and on the left in the RTL. |
start | The content is placed on the left in the LTR and on the right in the RTL. |