Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

A simple yet configurable native javascript counter which you can count on.

1.4kb GZIPPED Lightweight Javascript Counter

NPM NPM NPM

Demo

Proudly Hosted On Github Pages

Install

NPM

npm i --save @srexi/purecounterjs

In your app.js import and initialized the module like normal.

import PureCounter from '@srexi/purecounterjs';
const pure = new PureCounter;

Vanilla

If you wish to skip the modular build and NOT use npm you can use the vanilla build like so:

CDN

<html>
<head>
    ...
</head>
<body>
    ...

    <script src="https://cdn.jsdelivr.net/npm/@srexi/purecounterjs/dist/purecounter_vanilla.js"></script>
</body>
</html>

Self hosted

Download the dist/purecounter_vanilla.js file(for the minified version) or the js/purecounter.js file (for the prettified) version and include it right before your closing body tag:

<html>
<head>
    ...
</head>
<body>
    ...

    <script src="js/purecounter_vanilla.js"></script>
</body>
</html>

Or you can take the contents of the file and paste it into your bundle.js file.

How to use it:

To use it simply add the class: 'purecounter' to an element.

<p>I can count: <span class="purecounter"></span></p>

Lazy Loading Is Applied Out Of The Box

You can configure it by adding a data-purecounter-x attribute, here's an example:

<p>It's over (wait for it): <span data-purecounter-start="0" data-purecounter-end="9001" class="purecounter">0</span>!!!</p>

OPTIONAL:

<p>Yes! (even more): <span data-purecounter-start="0" data-purecounter-end="9001" data-purecounter-separator="true" data-purecounter-separatorsymbol="," class="purecounter">0</span>!!!</p>

Simply replace the X in "data-purecounter-X" with any of the api methods:

start - The number to start from (if this is more than the end method it will automatically count down).
end - The number to end at.
duration - The time in seconds for the animation to complete, you can use decimals like: 0.5 for half a second.
delay - The delay between each iteration (the default of 10 will produce 100 fps)
once - If it should only do the animation once. If this is off the number will do the animation every time the element comes into view, otherwise it will only do it the first time.
decimals - how many decimal places to show. It will automatically format the number according to the individual users browser standards.
legacy - Purecounter will use the very lightweight & fast intersectionListener available in most modern browsers. If this is true it will use the scroll event listener on browsers which does not support the intersection listener (RECOMMENDED: true).
currency - This will enable International Currency System format that will short your number (e.g. Thousands become K, Million become M, etc.), also integrated with decimals configuration (only show 1 decimals by default).
currencysymbol - This is the char or symbol or string that will be added before the number when you enable Currency System format.
separator - This will enable comma separator for thousands.
separatorsymbol - Allow you to customize what separator symbol, if none is specified default symbol will be comma (,).

Default Values:

If you do not override the methods default to these values:

start: 0 [uint]
end: 9001 [uint]
duration: 2 [seconds|uint]
delay: 10 [milliseconds|uint]
once: true [boolean]
decimals: 0 [uint]
legacy: true [boolean]
currency: false [boolean]
currencysymbol: false [char|string]
separator: false [boolean]
separatorsymbol: ',' [string]

Browser Tests By Browserstack

Browser Support

  • Chrome/Edge/Opera: Yes
  • Firefox: Yes
  • IE: 9+
  • Safari: 7+
  • MISSING A BROWSER? Make A Pull Request

About

A simple yet configurable native javascript counter which you can count on.

Resources

License

Packages

No packages published