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.
<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.
<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.
<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 |