Skip to main content

Progress bar

shadow

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

DescriptionAdjusts the radius of the circular waveform indicator.
Attributeradius
Typenumber
Default70

stroke

DescriptionAdjusts the thickness of the waveform indicator line.
Attributestroke
Typenumber
Default6

progress

DescriptionSets the current progress status in percentage.
Attributeprogress
Typenumber
Defaultundefined

type

DescriptionSpecifies the type of waveform indicator (default linear or 'circle' for circular).
Attributetype
Typestring
Defaultundefined

linecap

DescriptionSets the line ending style (e.g. 'square', 'round').
Attributelinecap
Typestring
Defaultsquare

color

DescriptionSets the color scheme of the progress indicator (primary, complete, success, warning, danger, info).
Attributecolor
Typestring
Defaultundefined

Events

No events available for this component.

Methods

getCircleDasharray

DescriptionReturns the value for the dasharray of a circle with the given radius.
SignaturegetCircleDasharray(radius?: number) => number

getCircleDashoffset

DescriptionReturns the value for the dashoffset of a circle with the given waveform and radius.
SignaturegetCircleDashoffset(progress?: number, radius?: number) => number

setCircleProgress

DescriptionSets the waveform value for the circular indicator.
SignaturesetCircleProgress(percent: number) => void

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

NameDescription
--wje-progress-bar-background-colorSets the background color of the progress bar.
--wje-progress-bar-colorSets the colour of the progress bar. This property controls the color of the waveform indicator fill.
--wje-progress-bar-text-sizeDefines the font size of the text displayed inside the progress bar.
--wje-progress-bar-text-colorSpecifies the color of the text displayed inside the progress bar.

Slots

NameDescription
``Default progress bar slot.
startSlot at the beginning of the progress indicator.
endSlot at the end of the progress indicator.