Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Elements
  • Overview
  • Usage
  • Components Customization
  • Elements
    • Apps Icons
    • Breadcrumb
    • Color Picker
    • Conditional Fields
    • Count Down
    • Filters
    • Infinite Scroll
    • List Tile
    • Loading
    • Map
    • Modal
    • Placeholder
    • Progress Bar
    • Rating Stars
    • Reviews
    • Reviews Summary
    • Sheet
    • Skeleton
    • Slider
    • Social
    • Social Share
    • Tabs
  • Form
    • Button
    • Bottom Alert
    • Contacts
    • Date Time Picker
    • File Upload
    • Menu
    • Quantity Input
    • Select
    • Tel Input
  • Product
    • Add Product
    • Advertisement
    • Comments
    • Conditional Offer
    • Gifting
    • Installment
    • Meta Data
    • Offer
    • Offer Modal
    • Orders
    • Payments
    • Product Availability
    • Product Card
    • Products List
    • Product Options
    • Product Size Guide
    • Products Slider
    • Quick Buy
    • Quick Order
    • Scopes
    • Search
  • User
    • Cart Summary
    • Localization
    • Login
    • Loyalty
    • Rating
    • User Menu
    • User Profile
    • User Settings
    • Verify
  1. Elements

Count Down

The <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#

Count Down

Usage#

HTML
SASS

Properties#

PropertyAttributeDescriptionTypeDefault
BoxedboxedThe count down numbers will appear in boxes, if the value is set to true.booleanundefined
ColorcolorThe color of the count down."dark" | "light" | "primary"'dark'
DatedateThe count down date format, which is the following: MMM DD, YYYY HH:mm:ss. (Example: Jan 2, 2023 16:37:52).stringundefined
DigitsdigitsThe digits language format standard to show in the count down."auto" | "en"'auto'
End of Dayend-textthe count down will end at the end of the day, if value set to true.booleanundefined
End Textend-textThe text to show when the count down ends.stringundefined
LabeledlabeledShows labels for each count down number.booleanundefined
SizesizeThe count down size."lg" | "md" | "sm"'md'

Methods#

The pre-defined 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.
MethodDescriptionReturn Type
endCountDown()Ends the count down.Promise<void>
Modified at 2024-08-18 08:36:49
Previous
Conditional Fields
Next
Filters