jsIncrements
A small library with the logic needed to increment counters and progress bars
See a Demo
Installation
Browser
<!-- self hosted -->
<script src="<PATH>/dist/index.min.js"></script>
<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/js-increments@<VERSION>/dist/index.min.js"></script>Node.js
npm i js-incrementsimport jsIncrements from 'js-increments'How to use
const counter = new jsIncrements({
from: 0,
to: 100,
max: 100,
step: 1,
duration: 5000,
wait: 0,
target: {
selector: '#progressText',
type: 'text',
},
});
counter.start();
// or new jsIncrements(options).start()Counter Options
| Option | Type | Default | Description |
|---|---|---|---|
from |
Number |
0 | The number that the counter should start |
to |
Number |
100 | The number that the counter must stop |
duration |
Number |
50 | Time duration of the animation (ms) |
wait |
Number |
0 | Time to wait before starting (ms) |
max |
Number |
100 | Reference to the maximum number of the counter. Useful when working with percentages |
step |
Number |
1 | How many numbers to advance with each increment |
target |
Boolean or Object
|
false | See bellow |
targets |
Array |
[] | Same as target. But an array |
onStart |
null or function
|
null | Function when run on startup |
onUpdate |
null or function
|
null | Function when increment |
onFinish |
null or function
|
null | Function when finished |
The
onStart,onUpdateandonFinishcallbacks receives the counter instance as a parameter
onUpdate: (data) => {
console.log('updated', data.counter)
},
Target Options
| Option | Type | Default | Description |
|---|---|---|---|
selector |
String |
null |
DOM element selector that should be manipulated. Something like #progress or .counter
|
type |
String |
'text' |
Kind of manipulation. style or text
|
property |
String |
'width' |
CSS property that must be changed (will be manipulated with setProperty) |
unit |
String |
'%' |
CSS property unit |
percentage |
Boolean |
true |
Whether you want to display the number in percentage or the real number. For example: a progress bar containing the steps of a wizard that goes from 0 to 5. When you get halfway through the progress bar, do you want to display 3 or 50%? |
mode |
String |
'precision' |
If set to precision, each increment will generate a DOM update. This mode requires more processing. If set to performance, only an initial update is performed and the effect happens through CSS (transition-property and transition-duration). |
Example for manipulating a progress bar
const target = {
selector: '#progressBar #bar',
property: 'width',
type: 'style',
unit: '%'
},Example for manipulating a text
const target = {
selector: '#progressCircle text',
type: 'text',
percentage: true
},Developer commands
Run tests
npm run test
Watch project
npm run watch
Build
npm run build