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.
Attributes and Properties
radius
Description | Adjusts the radius of the circular waveform indicator. |
Attribute | radius |
Type | number |
Default | 70 |
stroke
Description | Adjusts the thickness of the waveform indicator line. |
Attribute | stroke |
Type | number |
Default | 6 |
progress
Description | Sets the current progress status in percentage. |
Attribute | progress |
Type | number |
Default | undefined |
type
Description | Specifies the type of waveform indicator (default linear or 'circle' for circular). |
Attribute | type |
Type | string |
Default | undefined |
linecap
Description | Sets the line ending style (e.g. 'square', 'round'). |
Attribute | linecap |
Type | string |
Default | square |
color
Description | Sets the color scheme of the progress indicator (primary, complete, success, warning, danger, info). |
Attribute | color |
Type | string |
Default | undefined |
Events
No events available for this component.
Methods
getCircleDasharray
Description | Returns the value for the dasharray of a circle with the given radius. |
Signature | getCircleDasharray(radius?: number) => number |
getCircleDashoffset
Description | Returns the value for the dashoffset of a circle with the given waveform and radius. |
Signature | getCircleDashoffset(progress?: number, radius?: number) => number |
setCircleProgress
Description | Sets the waveform value for the circular indicator. |
Signature | setCircleProgress(percent: number) => void |
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
Name | Description |
---|---|
--wje-progress-bar-background-color | Sets the background color of the progress bar. |
--wje-progress-bar-color | Sets the colour of the progress bar. This property controls the color of the waveform indicator fill. |
--wje-progress-bar-text-size | Defines the font size of the text displayed inside the progress bar. |
--wje-progress-bar-text-color | Specifies the color of the text displayed inside the progress bar. |
Slots
Name | Description |
---|---|
`` | Default progress bar slot. |
start | Slot at the beginning of the progress indicator. |
end | Slot at the end of the progress indicator. |