Gauge
Gauge allow to show progress value in a form of a circle proportional to maximum value defined, with thumb being proportional to the value. Gauge parameters allow to display current value in the center and maximum value below. Component animates thumb to reach set value in clockwise direction or in reverse depend on the parameter. One can define thumb & track colours separately. Size of the gauge element can also be defined with parameter.
| Example | Code |
|---|---|
<as-gauge>30</as-gauge> |
|
<as-gauge showmax reverse size="8" max="150" track="--as-color-status-warning" thumb="--as-color-accent-strong" speed="5" delay="500">50</as-gauge> |
|
<as-gauge showmax size="7" max="123" bg="--as-color-background-nav-weak" track="--as-color-status-warning" thumb="--as-color-accent-strong" speed="5" delay="750">55</as-gauge> |
|
<as-gauge showmax half size="8" max="150" thumb="--as-color-status-error-weak" speed="5" delay="500">73</as-gauge> |
|
<as-gauge showmax reverse half size="12" max="150" thumb="--as-color-status-success-weak" speed="1" delay="1500">107</as-gauge> |
|
<as-gauge half size="3" max="100" thumb="--as-color-status-success-weak" speed="2" delay="500">67</as-gauge> |
| Property name | Description | Type |
|---|---|---|
| size | Optional: value defines size of the gauge in EM units, default value is 3 | string |
| showmax | Optional: if present gauge is displaying max value defined within max parameter | param |
| thumb | Optional: value defines thumb colour, if omitted it defaults to --as-color-status-success | string |
| track | Optional: value defines track colour, if omitted it defaults to --as-color-text-neutral | string |
| bg | Optional: value defines background colour of the gauge element colour, if omitted it defaults to transparent | string |
| reverse | Optional: if present it animates value thumb counterclockwise. | param |
| half | Optional: if present gauge is displayed as half circle. | param |
| delay | Optional: defines delay before animation of the thumb value starts, in milliseconds. If omitted it defaults to 1000. For no delay and instant animation start use 0 as param value. | string |
| speed | Optional: defines time in which thumb reaches set value, in seconds. If omitted it defaults to 1. To make gauge thumb appear instantly use 0 as param value. | string |