Js-increments NPM

jsIncrements

A small library with the logic needed to increment counters and progress bars

Size Language Last commit

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

counter progress increment

@everything-registry/sub-chunk-1976 @zalastax/nolb-js-i

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago