A digit spinner web component. Displays a numeric value as a sequence of
animated digit elements.
| Name | Description | Type | Default |
| value | The numeric value displayed by the spinner. | number | 0 |
| direction | Determines whether digits animate "forward” or "backward" or "shortest" path. | Direction | 'forward' |
| duration | The duration of a single digit flip animation. | number | 200 |
| easing | The easing function to use for the digit transition. | string | 'cubic-bezier(0.83, 0, 0.17, 1)' |
| min-digits | Minimum number of digit slots to render (pads with leading zeros).
e.g. if value="195" and min-digits="5", you get 0, 0, 1, 9, 5. | number | 0 |
| Name | Attribute | Description | Type | Default |
| value | value | The numeric value displayed by the spinner. | number | 0 |
| direction | direction | Determines whether digits animate "forward” or "backward" or "shortest" path. | Direction | 'forward' |
| duration | duration | The duration of a single digit flip animation. | number | 200 |
| easing | easing | The easing function to use for the digit transition. | string | 'cubic-bezier(0.83, 0, 0.17, 1)' |
| minDigits | min-digits | Minimum number of digit slots to render (pads with leading zeros).
e.g. if value="195" and min-digits="5", you get 0, 0, 1, 9, 5. | number | 0 |
| Name | Description |
| --spinner-background | The background color of the spinner |
| --spinner-border-color | The border color of the spinner |
| --spinner-border-width | The border width of the spinner |
| --spinner-border-radius | The border radius of the spinner |
| --spinner-font-family | The font family of the spinner |
| --spinner-font-size | The font size of the spinner, also set by the `--digit-font-size` custom property |
| --spinner-padding | The padding of the spinner |
| --digit-background | The background color of the digit |
| --digit-border-radius | The border radius of the digit |
| --digit-box-shadow | The box shadow of the digit |
| --digit-color | The color of the digit |
| --digit-font-size | The font size of the digit, also set by the `--spinner-font-size` custom property |
| --digit-spacing | The spacing between digits |
| --digit-text-shadow | The text shadow of the digit, defaults to none |
A custom element that displays a single spinning digit. The digit can be
animated to a new value. This element is intended for use in digit spinners,
and is not intended for direct use.
| Name | Description | Type | Default |
| value | The value of the digit. This value is updated immediately, and may not match
the displayed value if the digit is animating. | number | 0 |
| direction | The direction of the digit transition.
* If `forward`, the digit value will increase (e.g. from 9 to 0) until the
target value is reached.
* If `backward`, the digit value will decrease (e.g. from 0 to 9) until the
target value is reached.
* If `shortest`, the digit value will take the shortest path
(either forward or backward) to the target value. | Direction | 'forward' |
| duration | The duration of the digit transition in milliseconds. | number | 200 |
| easing | The easing function to use for the digit transition. | string | 'cubic-bezier(0.83, 0, 0.17, 1)' |
| Name | Attribute | Description | Type | Default |
| value | value | The value of the digit. This value is updated immediately, and may not match
the displayed value if the digit is animating. | number | 0 |
| direction | direction | The direction of the digit transition.
* If `forward`, the digit value will increase (e.g. from 9 to 0) until the
target value is reached.
* If `backward`, the digit value will decrease (e.g. from 0 to 9) until the
target value is reached.
* If `shortest`, the digit value will take the shortest path
(either forward or backward) to the target value. | Direction | 'forward' |
| duration | duration | The duration of the digit transition in milliseconds. | number | 200 |
| easing | easing | The easing function to use for the digit transition. | string | 'cubic-bezier(0.83, 0, 0.17, 1)' |