To get the countdown to count down in real time requires JavaScript. The implementation of such JS will be based on the context in which you are using a countdown timer.
The default countdown pattern stacks each element in the timer.
<ul class="countdown-timer">
<li class="countdown-days">03</li>
<li class="countdown-hours">00</li>
<li class="countdown-minutes">42</li>
<li class="countdown-seconds">37</li>
</ul>
Countdown bars get wrapped in a generic .countdown
selector.This adds support for a .countdown-header
selector, which can act as a label for your timer.
<section class="container-fluid">
<div class="countdown">
<span class="countdown-header">The thing starts in...</span>
<ul class="countdown-timer list-inline">
<li class="countdown-days">03</li>
<li class="countdown-hours">00</li>
<li class="countdown-minutes">42</li>
<li class="countdown-seconds">37</li>
</ul>
</div>
</section>
You have the option to adjust the background color of the countdown bar, which will adjust the countdown elements' colors. Currently, only .countdown-bg-cyan
is supported.
You can also change the text color alone. Currently only .countdown-white
is supported.
<section class="container-fluid">
<div class="countdown countdown-bg-cyan">
<span class="countdown-header">The thing starts in...</span>
<ul class="countdown-timer list-inline">
<li class="countdown-days">03</li>
<li class="countdown-hours">00</li>
<li class="countdown-minutes">42</li>
<li class="countdown-seconds">37</li>
</ul>
</div>
</section>
By wrapping the countdown timer in a .countdown-border
selector, the countdown will be centered and bordered, so it can float on its own outside the context of a color bar.
<div class="countdown countdown-border">
<ul class="countdown-timer">
<li class="countdown-days">03</li>
<li class="countdown-hours">00</li>
<li class="countdown-minutes">42</li>
<li class="countdown-seconds">37</li>
</ul>
</div>
On the cyan countdown bar, buttons with the .countdown-btn
will have a lightened background.
<section class="container-fluid">
<div class="countdown countdown-bg-cyan">
<span class="countdown-header push-right">Thing is happeneing now!</span>
<a class="btn countdown-btn" href="/live/stream">Watch Now</a>
</div>
</section>