cla-card-progress
Progress bar - Adds a progress bar anywhere to the page, simply add the progression percentage to the progressbar attribute and it will the percentage on the bar.
Usage
<cla-progress progressbar="30"></cla-progress>Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
barcolour |
barcolour |
The colour of the progress bar - this colour must be represented as a HEX, RGB or HSL code in order for the contrasting to be computed | string |
"#367fbf" |
current |
current |
The current value. if no minium and maximum are specified the value is out of 100 | number |
0 |
height |
height |
The progress bar height | string |
undefined |
hideremainingprogress |
hideremainingprogress |
If 'true' the remaining progress bar is shown | boolean |
false |
maximum |
maximum |
The maximum value | number |
100 |
minimum |
minimum |
The minimum value. | number |
0 |
percentageComplete |
percentage-complete |
percentage of Progress completed | number |
undefined |
percentageRemaining |
percentage-remaining |
percentage of Progress remaining | number |
undefined |
showprogresstext |
showprogresstext |
If 'true' the progress text is shown | boolean |
false |
showremainingtext |
showremainingtext |
If 'true' the remaining progress text is shown | boolean |
false |
showunit |
showunit |
If 'true' the progress unit is shown | boolean |
false |
showvalueas |
showvalueas |
Show value as percentage or unit | "percentage" | "unit" |
'percentage' |
unit |
unit |
The progress unit | string |
'' |
width |
width |
The progress bar width (in px) | string |
undefined |
Built with StencilJS