Skip to content

Elements:Counters

Add nice counters and countdown timers.

Counters

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>

0

Count Up

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

0

Count Down

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

5088767


Timers

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

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

2021 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>2021 starts in <span class="countdown font-weight-bold" data-countdown="2021/01/01 00:00:01" data-countdown-format='%-D %!D:day,days;'></span> time.</p>

2021 starts in time.

Formats
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
Plurals
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

Back to intro page