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.

Theming of colours

Even with smaller circular variations, you can reorder the same progress in different meaning colors according to the process state or outcome.

When to use

Use wje-progress-bar when you need to continuously show the progress of a job, load or other process in linear or circular form.

When not to use

Do not use it where the user needs precise textual status information without a visual indicator. In this case, add or prefer a text status.

Accessibility

The component sets the progressbar role, so it makes sense to keep progress in a range that corresponds to the real state, and to add a textual description for important steps.

Recommended practices

• Use the same type of indicator within a single flow so that the user does not have to switch between linear and circular variants for no reason.
• If progress is key to the user's decision making, add text or labels in the start' and end' slots.
• Use color variations for meaning, not as the sole carrier of information.

Attributes and properties

linecap

Popis	Nastavuje štýl zakončenia čiary indikátora progresu.
Atribút	linecap
Typ	string
Predvolené	square

progress

Popis	Nastavuje hodnotu progresu zobrazenú v indikátore.
Atribút	progress
Typ	number
Predvolené	-

radius

Popis	Nastavuje polomer používaný pri kruhovom variante progress baru.
Atribút	radius
Typ	number
Predvolené	70

stroke

Popis	Nastavuje hrúbku vykresleného indikátora progresu.
Atribút	stroke
Typ	number
Predvolené	6

Events

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS shadow parts

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS custom variables

Názov	Popis
--wje-progress-bar-color	Vlastná CSS premenná, ktorá riadi color.
--wje-progress-bar-text-size	Vlastná CSS premenná na štýlovanie komponentu (text size).
--wje-progress-bar-text-color	Vlastná CSS premenná, ktorá riadi text color.

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.
start	Slot pre obsah zobrazený pred hlavným obsahom.
end	Slot pre obsah zobrazený za hlavným obsahom.