Countdown

Create a simple countdown timer.

Usage

To apply this component, add the uk-countdown attribute to a container element and define a date when the countdown should expire. Just add date: YYYY-MM-DDThh:mm:ssTZD option to the attribute, using the ISO 8601 format, e.g. {%isodate%} (UTC time).

Add the following classes to child elements to apply the necessary functionality and styling.

ClassDescription
.uk-countdown-daysAdd this class to indicate the days to be counted down.
.uk-countdown-hoursAdd this class to indicate the hours to be counted down.
.uk-countdown-minutesAdd this class to indicate the minutes to be counted down.
.uk-countdown-secondsAdd this class to indicate the seconds to be counted down.
.uk-countdown-numberThis class adds the neccessary style to a countdown number.
<div uk-countdown="date: {%isodate%}">
  <span class="uk-countdown-days uk-countdown-number"></span>
  <span class="uk-countdown-hours uk-countdown-number"></span>
  <span class="uk-countdown-minutes uk-countdown-number"></span>
  <span class="uk-countdown-seconds uk-countdown-number"></span>
</div>
Copy to clipboard
  • <div
      class="uk-grid-small uk-margin uk-child-width-auto"
      uk-grid
      uk-countdown="date: 2024-07-30T03:39:10+00:00"
    >
      <div>
        <div class="uk-countdown-days uk-countdown-number"></div>
      </div>
      <div>
        <div class="uk-countdown-hours uk-countdown-number"></div>
      </div>
      <div>
        <div class="uk-countdown-minutes uk-countdown-number"></div>
      </div>
      <div>
        <div class="uk-countdown-seconds uk-countdown-number"></div>
      </div>
    </div>

Separator

To insert a separator between each number, use the .uk-countdown-separator class.

<div uk-countdown="date: {%isodate%}">
  <span class="uk-countdown-days uk-countdown-number"></span>
  <span class="uk-countdown-separator">:</span>
  <span class="uk-countdown-hours uk-countdown-number"></span>
  <span class="uk-countdown-separator">:</span>
  <span class="uk-countdown-minutes uk-countdown-number"></span>
  <span class="uk-countdown-separator">:</span>
  <span class="uk-countdown-seconds uk-countdown-number"></span>
</div>
Copy to clipboard
  • :
    :
    :
  • <div
      class="uk-grid-small uk-margin uk-child-width-auto"
      uk-grid
      uk-countdown="date: 2024-07-30T03:39:10+00:00"
    >
      <div>
        <div class="uk-countdown-days uk-countdown-number"></div>
      </div>
      <div class="uk-countdown-separator">:</div>
      <div>
        <div class="uk-countdown-hours uk-countdown-number"></div>
      </div>
      <div class="uk-countdown-separator">:</div>
      <div>
        <div class="uk-countdown-minutes uk-countdown-number"></div>
      </div>
      <div class="uk-countdown-separator">:</div>
      <div>
        <div class="uk-countdown-seconds uk-countdown-number"></div>
      </div>
    </div>

Label

To add a label to each number, use the .uk-countdown-label class.

<div class="uk-countdown-label">Days</div>
<div class="uk-countdown-label">Hours</div>
<div class="uk-countdown-label">Minutes</div>
<div class="uk-countdown-label">Seconds</div>
Copy to clipboard
  • Days
    :
    Hours
    :
    Minutes
    :
    Seconds
  • <div
      class="uk-grid-small uk-child-width-auto"
      uk-grid
      uk-countdown="date: 2024-07-30T03:39:10+00:00"
    >
      <div>
        <div class="uk-countdown-days uk-countdown-number"></div>
        <div class="uk-visible@s uk-countdown-label uk-margin-small uk-text-center">
          Days
        </div>
      </div>
      <div class="uk-countdown-separator">:</div>
      <div>
        <div class="uk-countdown-hours uk-countdown-number"></div>
        <div class="uk-visible@s uk-countdown-label uk-margin-small uk-text-center">
          Hours
        </div>
      </div>
      <div class="uk-countdown-separator">:</div>
      <div>
        <div class="uk-countdown-minutes uk-countdown-number"></div>
        <div class="uk-visible@s uk-countdown-label uk-margin-small uk-text-center">
          Minutes
        </div>
      </div>
      <div class="uk-countdown-separator">:</div>
      <div>
        <div class="uk-countdown-seconds uk-countdown-number"></div>
        <div class="uk-visible@s uk-countdown-label uk-margin-small uk-text-center">
          Seconds
        </div>
      </div>
    </div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. For more information, take a look at the chapter on component configuration.

OptionValueDefaultDescription
dateStringfalseAny string parsable by Date.parse. See Reference.

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.countdown(element, options);

Methods

The following methods are available for the component:

Start

UIkit.countdown(element).start();

Starts the countdown.

Stop

UIkit.countdown(element).stop();

Stops the countdown.

Accessibility

The Countdown component automatically sets the appropriate WAI-ARIA roles, states and properties.

  • The container element has the timer role.

Theme development

On your tailwind.config.js file, add the Countdown component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        countdown: {
            hooks: {},
            media: true
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-countdown.uk-countdown
hook-item.uk-countdown-number, .uk-countdown-separator
hook-number.uk-countdown-number
hook-separator.uk-countdown-separator
hook-label.uk-countdown-label
hook-misc*