cla-progress-circle
Progress Circle - Displays a percentage circle with a progress bar around the outside.
Usage
<cla-progress-circle primarycolor="#00c6b6" size="small" percentage="25"></cla-progress-circle>
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
customtext |
customtext |
Using the customtext attribute you can add text in place of the percentage number | string |
undefined |
inverted |
inverted |
Whether to use the inverted variant of the progress circle. | boolean |
undefined |
percentage |
percentage |
The percentage of completion of the progress circle - this automatically created from the percentage number | number |
0 |
primarycolor |
primarycolor |
The primary color which affects the percentage bar color and the percentage text color | string |
"#000" |
size |
size |
The size of the progress circle - defaults to 90px but can set to any size in px, em, rems. | string |
"90px" |
Built with StencilJS