Skip to main content

Documentation

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. 2025-10-28T19:26:11+00:00 (UTC time).

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

Class Description
.uk-countdown-days Add this class to indicate the days to be counted down.
.uk-countdown-hours Add this class to indicate the hours to be counted down.
.uk-countdown-minutes Add this class to indicate the minutes to be counted down.
.uk-countdown-seconds Add this class to indicate the seconds to be counted down.
.uk-countdown-number Add this class to use it as selector for custom CSS style. 
<div uk-countdown="date: {%isodate%}">
    <span class="uk-countdown-number uk-countdown-days"></span>
    <span class="uk-countdown-number uk-countdown-hours"></span>
    <span class="uk-countdown-number uk-countdown-minutes"></span>
    <span class="uk-countdown-number uk-countdown-seconds"></span>
</div>

To style the countdown use style classes from the Base component, Heading component or Text component.

<div class="uk-h1" uk-countdown="date: {%isodate%}"></div>
<div class="uk-h1 uk-grid-small uk-child-width-auto uk-flex-middle uk-margin" uk-grid uk-countdown="date: {%isodate%}">
    <div>
        <div class="uk-countdown-number uk-countdown-days"></div>
    </div>
    <div>
        <div class="uk-countdown-number uk-countdown-hours"></div>
    </div>
    <div>
        <div class="uk-countdown-number uk-countdown-minutes"></div>
    </div>
    <div>
        <div class="uk-countdown-number uk-countdown-seconds"></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-number uk-countdown-days"></span>
    <span class="uk-countdown-separator">:</span>
    <span class="uk-countdown-number uk-countdown-hours"></span>
    <span class="uk-countdown-separator">:</span>
    <span class="uk-countdown-number uk-countdown-minutes"></span>
    <span class="uk-countdown-separator">:</span>
    <span class="uk-countdown-number uk-countdown-seconds"></span>
</div>
:
:
:
<div class="uk-h1 uk-grid-small uk-child-width-auto uk-flex-middle uk-margin" uk-grid uk-countdown="date: {%isodate%}">
    <div>
        <div class="uk-countdown-number uk-countdown-days"></div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-hours"></div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-minutes"></div>
    </div>
    <div class="uk-countdown-separator">:</div>
    <div>
        <div class="uk-countdown-number uk-countdown-seconds"></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>

To style the labels use style classes from the Base component, Heading component or Text component.

Days
:
Hours
:
Minutes
:
Seconds
<div class="uk-grid-small uk-child-width-auto uk-text-center uk-margin" uk-grid uk-countdown="date: {%isodate%}">
    <div>
        <div class="uk-h1 uk-countdown-number uk-countdown-days"></div>
        <div class="uk-countdown-label uk-text-small uk-visible@s">Days</div>
    </div>
    <div class="uk-h1"><div class="uk-countdown-separator">:</div></div>
    <div>
        <div class="uk-h1 uk-countdown-number uk-countdown-hours"></div>
        <div class="uk-countdown-label uk-text-small uk-visible@s">Hours</div>
    </div>
    <div class="uk-h1"><div class="uk-countdown-separator">:</div></div>
    <div>
        <div class="uk-h1 uk-countdown-number uk-countdown-minutes"></div>
        <div class="uk-countdown-label uk-text-small uk-visible@s">Minutes</div>
    </div>
    <div class="uk-h1"><div class="uk-countdown-separator">:</div></div>
    <div>
        <div class="uk-h1 uk-countdown-number uk-countdown-seconds"></div>
        <div class="uk-countdown-label uk-text-small uk-visible@s">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.

Option Value Default Description
date String false Any string parsable by Date.parse. See Reference.
reload Boolean false Reload page after countdown expires. Initially expired countdowns won't reload the page.

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.