Preview

Countdown vertical

Tickets

00Days
00Hours
00Minutes
00Seconds

Deadline

Tickets

00Days
00Hours
00Minutes
00Seconds

Deadline

Countdown horizontal

Tickets

00Days
00Hours
00Minutes
00Seconds

Deadline

Tickets

00:
00:
00:
00days

Deadline

Usage

<div class="countdown countdown-vertical">
    <h3>Tickets</h3>
    <div data-time="02/21/2020 10:30:00" data-utc-offset="-5">
        <div><span class="days text-md">00</span><span>Days</span></div>
        <div><span class="hours text-md">00</span><span>Hours</span></div>
        <div><span class="minutes text-md">00</span><span>Minutes</span></div>
        <div><span class="seconds text-md">00</span><span>Seconds</span></div>
    </div>
    <p>Deadline</p>
</div>

<div class="countdown countdown-horizontal">
    <h3>Tickets</h3>
    <div data-time="02/21/2020 10:30:00" data-utc-offset="-5">
        <div><span class="days text-md">00</span><span>Days</span></div>
        <div><span class="hours text-md">00</span><span>Hours</span></div>
        <div><span class="minutes text-md">00</span><span>Minutes</span></div>
        <div><span class="seconds text-md">00</span><span>Seconds</span></div>
    </div>
    <p>Deadline</p>
</div>

Installation

<script src='themekit/scripts/progress.js'></script>

Settings

Name Type Description
Initialization -- Add the class countdown and the attribute data-time="mm/dd/yyyy hh:mm:ss" to target object, insert into the target container the items for days, hours, minutes, seconds by add to theme the classes days,hours,minutes,seconds.
Initialization Javascript Use the function $('#target').downCount({ date: 'mm/dd/yyyy hh:mm:ss', offset: number });
Settings Data attribute
date="mm/dd/yyyy hh:mm:ss" Date and time of countdown.
offset="-1" UTC Timezone offset. You can get your UTC here.
Documentation