Progress
#Progress
The Progress component creates a progress bar that can be used to provide visual feedback.
Construction
Code
<div>
<kol-progress _label="Fortschritt" _variant="bar" _max="100" _value="20"></kol-progress>
<kol-progress _label="Fortschritt" _variant="cycle" _max="100" _value="20"></kol-progress>
</div>
Example
Usage
Use the _variant attribute to control the visual output of the component. Possible values are:
bar: for output as a horizontal progress barcycle: for output as a circular progress bar
Use the _max attribute to determine the maximum value of the component, the minimum is always 0.
Use the _value attribute to determine the current value of the component.
Links and references
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_label | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined | undefined |
_max (required) | _max | Defines the maximum value of the element. | number | undefined |
_unit | _unit | Defines the unit of the step values (not shown). | string | undefined | '%' |
_value (required) | _value | Defines the value of the element. | number | undefined |
_variant | _variant | Defines which variant should be used for presentation. | "bar" | "cycle" | undefined | undefined |