Skip to content

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

License

Notifications You must be signed in to change notification settings

mauricio-testa/js-increments

Repository files navigation

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published