Author: | srexi |
---|---|
Views Total: | 6,490 views |
Official Page: | Go to website |
Last Update: | February 2, 2022 |
License: | MIT |
Preview:

Description:
A pure JavaScript counter plugin which counts down or counts up towards to a specific point when the counter is scrolled into view.
How to use it:
1. Install and import the counter.
# NPM $ npm install @srexi/purecounterjs --save
// ES6 import import PureCounter from '@srexi/purecounterjs';
<!-- Browser --> <script async src="dist/purecounter.js"></script>
2. Add the CSS class ‘purecounter’ to the counter element and specify the start/end points in the data-*
attributes.
<span data-purecounter-start="0" data-purecounter-end="100" class="purecounter"> 0 </span>
3. Config the duration of the animation. Default: 2.
<span data-purecounter-start="0" data-purecounter-end="100" data-purecounter-duration="3" class="purecounter"> 0 </span>
4. Set the time to wait before the animation. Default: 10.
<span data-purecounter-start="0" data-purecounter-end="100" data-purecounter-delay="5" class="purecounter"> 0 </span>
5. Set whether this animation is only allowed once when you scroll down and up the webpage. Default: true.
<span data-purecounter-start="0" data-purecounter-end="100" data-purecounter-once="false" class="purecounter"> 0 </span>
6. Determine the decimal places to show. Default: 0.
<span data-purecounter-start="0" data-purecounter-end="100" data-purecounter-decimals="3" class="purecounter"> 0 </span>
7. Enable/disable the Legacy mode. Turn on the option to enable the counter on legacy browsers that don’t support the Intersection Observer API. Default: true.
<span data-purecounter-start="0" data-purecounter-end="100" data-purecounter-legacy="false" class="purecounter"> 0 </span>
8. Initialize the counter.
new PureCounter();
9. Initialize the counter with options. Note that all the options below can be passed via data-purecounter-*
attribute:
new PureCounter({ selector: '.purecounter', start: 0, end: 100, duration: 2, delay: 10, once: true, repeat: false, decimals: 0, legacy: true, filesizing: false, currency: false, separator: false, });
Changelog:
v1.4.1 (02/02/2022)
- Bugfix
v1.3.0 (01/30/2022)
- Allow user to set default config
- Add repeat feature
- Add file size counter
v1.2.1 (08/09/2021)
- update
v1.1.4 (06/04/2021)
- update
v1.1.3 (06/02/2021)
- update
v1.1.2 (05/30/2021)
- Fixed Numbers with a comma
Wondering why when I used the number 63428522 it loses all it’s commas but when I use 9000 all is good. Also there should be a currency mode and no forced decimals parameter to see the commas in the value. I wanted the result $63,428,522.00 not $63428522.00
0
Thanks!
Michael
Great ! Thank for your sharing
Is there a way to show the comma’s without showing the decimal? I want to count to 50,00,000 and not 50,000,000.00