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

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