Counter
Creates a component that counts to a given number.
Usage
To apply the counter component, add the data-f-counter
attribute to an element containing just a number and set the to
value in the options.
There is no styling with this component as the styles will always be based on the site it is used on. However, note that because of font kerning it is usually the best idea to use a monspaced font to display counting numbers so that the line or text surrounding the number doesn't jump around.
Examples
I will start counting right away: 0
I will start in 5 seconds: 0
I have a fully formatted number: 0
I have formatted thousands: 0
I take 10 seconds to count up: 0
I count down: 123456
I go all the way: 0
I count to 5000 from 0 but show 5000 when not enabled: 5000
I am monospaced and pad to the number of digits: 0
I'm tied to progress: 0
NOTE Progress requires the progress CSS.
Markup
// Starts right away
<span data-f-counter="{ to : 500000 }">0</span>
// Starts in 5 seconds
<span data-f-counter="{ to : 500000, wait: 5000 }">0</span>
// Fully formatted
<span data-f-counter="{ to : 500000, format: { decimals: 2, point: '.', thousand: ','}, wait: 2000 }">0</span>
// Just thousands formatted
<span data-f-counter="{ to : 500000, format: { thousand: ','}, wait: 3000 }">0</span>
// Takes 10 seconds to run
<span data-f-counter="{ to : 500000, duration : 5 }">0</span>
// Counts down
<span data-f-counter="{ to : 0, format: { thousand: ','} }">500000</span>
// Adds a symbol to the end
<span data-f-counter="{ to : 100, symbol : '%' }">0</span>
// Padded to digits and monospaced
<span style="font-family: Consolas;" data-f-counter="{ to : 500000, pad : true }">0</span>
// For progress indicator
<span data-f-counter="{ to : 1000, duration : 10, progress : '.my-progress' }">0</span>
<div class="f-progress my-progress">
<div class="f-progress-bar" style="width: 0%;">0%</div>
</div>
Continue down for scrollspy examples...
I only start running when I'm in view: 0
Markup
<span data-f-counter="{ to : 500000, duration : 5, scrollspy : true }">0</span>
I only start running when I'm in view by 250px: 0
I only start running when I'm in view by 250px: 0 (with a .5 second delay)
Markup
<span data-f-counter="{ to : 500000, duration : 5, scrollspy : { topoffset : -250 } }">0</span>
Easing functions: 0
Markup
<span data-f-counter="{ to : 500000, duration : 5, scrollspy : { topoffset : -250 }, easing : 'easeOutCubic' }">0</span>
JavaScript options
Option | Possible value | Default | Description |
---|---|---|---|
from |
integer | false | Alternate start value from text content |
to |
integer | false | Value to count to |
easing |
string | easeInOut | One of linear , easeIn , easeOut , easeInOut ,easeInCubic , easeOutCubic , easeInOutCubic |
wait |
integer | false | Timeout (in seconds) before the count starts |
duration |
integer | 3 | How long (in seconds) to take |
format |
object | {} | Broken down into decimals , point , thousand e.g. { decimals: 2, point: '.', thousand: ','} |
pad |
boolean | false | Always shows full number of digits |
symbolBefore |
string | empty string | symbol to add at the start of a number (e.g £) |
symbolAfter |
string | empty string | symbol to add at the end of a number (e.g %) |
Init element manually
let counter = FatKit.counter(element, { /* options */ });
Events
Name | Parameter | Description |
---|---|---|
start.f.counter |
event | The counter has started! |
step.f.counter |
event | Fires each update of the number. Handy for progress etc. |
complete.f.counter |
event | Fired when counting has finished |