Kinsey

# Countdown (Coming Soon)

You can find the complete API at the official jQuery The Final Countdown (opens new window) website.

# Markup

<div class="row h-100 align-items-center justify-content-center text-center g-4" data-count-down="2021/12/31" data-arts-os-animation="true" data-arts-os-animation-name="animateJump">
  <div class="col-sm-4">
    <div class="counter">
      <div class="counter__number h1" data-count-down-element="D">--</div>
      <div class="counter__label">Days</div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="counter">
      <div class="counter__number h1" data-count-down-element="H">--</div>
      <div class="counter__label">Hours</div>
    </div>
  </div>
  <div class="w-100"></div>
  <div class="col-sm-4">
    <div class="counter">
      <div class="counter__number h1" data-count-down-element="M">--</div>
      <div class="counter__label">Minutes</div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="counter">
      <div class="counter__number h1" data-count-down-element="S">--</div>
      <div class="counter__label">Seconds</div>
    </div>
  </div>
</div>

# Attributes

  • data-count-down – Target date for the counter.
  • data-count-down-element – Countdown element.

# Showcase

  • 📄 048-coming-soon-dark.html
  • 📄 049-coming-soon-light.html

← Google Map →