Countdown

Ready Added in 2.0.0

Create a simple countdown timer.

Usage

To apply this component, add the gls-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. 2017-12-04T22:00:00+00:00 (UTC time).

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

Class	Description
`.gls-countdown-days`	Add this class to indicate the days to be counted down.
`.gls-countdown-hours`	Add this class to indicate the hours to be counted down.
`.gls-countdown-minutes`	Add this class to indicate the minutes to be counted down.
`.gls-countdown-seconds`	Add this class to indicate the seconds to be counted down.
`.gls-countdown-number`	This class adds the neccessary style to a countdown number.

<div gls-countdown="date: {%isodate%}">
    <span class="gls-countdown-number gls-countdown-days"></span>
    <span class="gls-countdown-number gls-countdown-hours"></span>
    <span class="gls-countdown-number gls-countdown-minutes"></span>
    <span class="gls-countdown-number gls-countdown-seconds"></span>
</div>

<div class="gls-grid-small gls-child-width-auto gls-margin" gls-grid gls-countdown="date: {%isodate%}">
    <div>
        <div class="gls-countdown-number gls-countdown-days"></div>
    </div>
    <div>
        <div class="gls-countdown-number gls-countdown-hours"></div>
    </div>
    <div>
        <div class="gls-countdown-number gls-countdown-minutes"></div>
    </div>
    <div>
        <div class="gls-countdown-number gls-countdown-seconds"></div>
    </div>
</div>

Separator

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

<div gls-countdown="date: {%isodate%}">
    <span class="gls-countdown-number gls-countdown-days"></span>
    <span class="gls-countdown-separator">:</span>
    <span class="gls-countdown-number gls-countdown-hours"></span>
    <span class="gls-countdown-separator">:</span>
    <span class="gls-countdown-number gls-countdown-minutes"></span>
    <span class="gls-countdown-separator">:</span>
    <span class="gls-countdown-number gls-countdown-seconds"></span>
</div>

:

:

:

<div class="gls-grid-small gls-child-width-auto gls-margin" gls-grid gls-countdown="date: {%isodate%}">
    <div>
        <div class="gls-countdown-number gls-countdown-days"></div>
    </div>
    <div class="gls-countdown-separator">:</div>
    <div>
        <div class="gls-countdown-number gls-countdown-hours"></div>
    </div>
    <div class="gls-countdown-separator">:</div>
    <div>
        <div class="gls-countdown-number gls-countdown-minutes"></div>
    </div>
    <div class="gls-countdown-separator">:</div>
    <div>
        <div class="gls-countdown-number gls-countdown-seconds"></div>
    </div>
</div>

Label

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

<div class="gls-countdown-label">Days</div>
<div class="gls-countdown-label">Hours</div>
<div class="gls-countdown-label">Minutes</div>
<div class="gls-countdown-label">Seconds</div>

Days

:

Hours

:

Minutes

:

Seconds

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

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.countdown(element, options);

Methods

The following methods are available for the component:

Start

Gloss.countdown(element).start();

Starts the countdown.

Stop

Gloss.countdown(element).stop();

Stops the countdown.