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-increments

import 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, onUpdate and onFinish callbacks 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