<cla-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

Properties

PropertyRequiredDescriptionTypeDefault
barcolourfalseThe colour of the progress bar - this colour must be represented as a HEX, RGB or HSL code in order for the contrasting to be computedstring"hsl(211.2, 58.9%, 42.9%)"
currentfalseThe current value. if no minium and maximum are specified the value is out of 100number0
heightfalseThe progress bar heightstringnull
hideremainingprogressfalseIf 'true' the remaining progress bar is shownbooleanfalse
maximumfalseThe maximum valuenumber100
minimumfalseThe minimum value.number0
percentageCompletefalsepercentage of Progress completednumbernull
percentageRemainingfalsepercentage of Progress remainingnumbernull
showprogresstextfalseIf 'true' the progress text is shownbooleanfalse
showremainingtextfalseIf 'true' the remaining progress text is shownbooleanfalse
showunitfalseIf 'true' the progress unit is shownbooleanfalse
showvalueasfalseShow value as percentage or unit"percentage" | "unit"'percentage'
unitfalseThe progress unitstring''
widthfalseThe progress bar width (in px)stringnull