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.

When to use

Use wje-progress-bar 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

progress

Description	Sets the progress value displayed by the bar.
Attribute	progress
Type	any
Default	-

Events

No events available for this component.

Methods

getCircleDasharray

Description	Returns the dasharray for a circle with the given radius.
Signature	(radius: number) => number

getCircleDashoffset

Description	Returns the dashoffset for a circle with the given progress and radius.
Signature	(progress: number, radius: number) => number

setCircleProgress

Description	Sets the progress of the circle.
Signature	(percent: any) => void

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.