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.
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 | This 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>
-
-
<div class="uk-grid-small uk-margin uk-child-width-auto" uk-grid uk-countdown="date: 2024-12-06T01:35:38+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>
- :::
-
<div class="uk-grid-small uk-margin uk-child-width-auto" uk-grid uk-countdown="date: 2024-12-06T01:35:38+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>
- Days:Hours:Minutes:Seconds
-
<div class="uk-grid-small uk-child-width-auto" uk-grid uk-countdown="date: 2024-12-06T01:35:38+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.
Option | Value | Default | Description |
---|---|---|---|
date | String | false | Any 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.
- On This Page
- Usage
- Separator
- Label
- Component options
- JavaScript
- Accessibility