Count Down
<salla-count-down> web component is used to show the amount of time left until a given date. It's perfect for tracking important events, or counting down to special occasions like birthdays and anniversaries. It displays the days, hours, minutes, and seconds left with an easy-to-read countdown timer, as well as customized color, size, and labeled text properties.Example
Usage
HTML
SASS
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| Boxed | boxed | The count down numbers will appear in boxes, if the value is set to true. | boolean | undefined |
| Color | color | The color of the count down. | "dark" | "light" | "primary" | 'dark' |
| Date | date | The count down date format, which is the following: MMM DD, YYYY HH:mm:ss. (Example: Jan 2, 2023 16:37:52). | string | undefined |
| Digits | digits | The digits language format standard to show in the count down. | "auto" | "en" | 'auto' |
| End of Day | end-text | the count down will end at the end of the day, if value set to true. | boolean | undefined |
| End Text | end-text | The text to show when the count down ends. | string | undefined |
| Labeled | labeled | Shows labels for each count down number. | boolean | undefined |
| Size | size | The count down size. | "lg" | "md" | "sm" | 'md' |
Methods
methods allow for calling functions built by Salla to carry out certain actvities, such as endCountDown which ends the cound down set by the developer.| Method | Description | Return Type |
|---|---|---|
endCountDown() | Ends the count down. | Promise<void> |
Modified at 2026-07-09 11:27:26