Skip to content


Add nice counters and countdown timers.


Simply add an data-toggle="count-to" data-to="NUMBER-TO" data-from="NUMBER-FROM" attribute to any element.

View code example
<h2 data-toggle="count-to" data-to="5088767" data-from="0">0</h2>


Count Up

View code example
<h2 data-toggle="count-to" data-to="288767" data-from="0">0</h2>


Count Down

View code example
<h2 data-toggle="count-to" data-to="0" data-from="5088767">5088767</h2>



Simply add an data-countdown="DATE-TO-COUNTDOWN-TO" attribute to any element.

View code example
<p>2018 starts in: <span class="countdown font-weight-bold" data-countdown="2018/01/01 00:00:01"></span></p>

2018 starts in:

Timer Format

By passing a data-countdown-format='DATE-FORMAT' you can control the output of the timer, you can even include HTML.

View code example
<p>2018 starts in <span class="countdown font-weight-bold" data-countdown="2018/01/01 00:00:01" data-countdown-format='%-D %!D:day,days;'></span> time.</p>

2018 starts in time.

Directive (01, 02, 03, .., 10) Blank-padded (1, 2, 3, .., 10) Description
%Y %-Y Years left *
%m %-m Months left *
%n %-n Days left until the next complete month *
%w %-w Weeks left
%W %-W Weeks left until the next complete month *
%d %-d Days left (taking away weeks)
%H %-H Hours left
%M %-M Minutes left
%S %-S Seconds left
%D %-D Total count of days till the end
%I %-I Total count of hours thill the end
%N %-N Total count of minutes till the end
%T %-T Total count of seconds till the end
Directive Description
%!H Return s when the hour is different than 1
%!S:plural; Return plural when seconds if different than 1
%!d:singular,plural; Return singular when day is 1 and plural otherwise

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage