spz-countdown

In the example below, this is a fifty-nine-second countdown.

<spz-countdown layout="container" timeleft-seconds="59">
  <template>
    <div>
      ${data.seconds}
    </div>
  </template>
</spz-countdown>

// For example `data` object
{
  "day": 1,
  "hour": 2,
  "mins": 18,
  "seconds": 7,
  "day_day": "01",
  "hour_hour": "02",
  "mins_mins": "18",
  "seconds_seconds": "07"
}

The countdown ends date time. It can be a valid Date or date separated by hyphens, just like this, 2022-11-29 18:18:18 etc.

It can be used in combination with offset and loop. If the current time is greater than the end-date that the countdown ends, and if the offset and loop attributes are present, the countdown will loop with the offset value.

<spz-countdown layout="container" end-date="2022/12/31 23:23:23" loop offset="10000">
  <template>
    <div>
      <span>${data.hour}</span>
      <span>${data.mins}</span>
      <span>${data.seconds}</span>
      <span>${data.seconds_seconds}</span>
    </div>
  </template>
</spz-countdown>

The countdown starts date time. If start-date is not configured and the end-date attribute is currently used, then the start time is the current time. It must be used with the end-date attribute.

Seconds of the countdown. The element countdowns from now to the given number of seconds.

If this attribute is present, enable the countdown loop.

A milliseconds number. When the current time is greater than the given end time, offset indicates the time interval to continue the loop. It must be used with the loop attribute.

If this attribute is present, the countdown doesn’t start immediately. You must trigger the start manually.

Start the countdown, no parameter required.

<spz-countdown id="countdown" layout="container" timeleft-seconds="5" loop manual>
  <template>
    <div>
      ${data.seconds}
    </div>
  </template>
</spz-countdown>

<button type="button" @tap="countdown.restart();">Start countdown</button>

Be automatically triggered when the countdown ends.