Spinteger.io

Available balance
389283
Animated spinning numbers
$ npm install spinteger --save

Spinteger makes changing numbers easy and elegant.

Normal
let num = document.querySelector('#number');

num.innerText = 0;
123456
Spinteger
let num document.querySelector('#number');
num spinteger(num);

num.val(0);
12389239

Installation

The recommended method of installing is compined NPM with the tool like Webpack.

NPM

npm i spinteger --save

Then simply import it into your application

import spinteger from 'spinteger'

The simplest possible usage is just including the javascript file on your page.

CDN

 <script src="http://spinteger.io/dist/spinteger.min.js"></script>

Configuration

You should set element as the first parameter in spinteger function.

1873656

element in spinteger(element)

Type: HTMLelement > SPAN

Required: true

Description:

HTMLElement, that you want to be animated. The element should be passed as the first parameter of the function spinteger. The element must be span element and has only digits inside it.

Example
<span id="number">1873656</span>
var num = spinteger(document.querySelector('#number'));

num.val(3892382); // any number
1873656

fontSize

Type: number

Required: false

Default: inherit or 16px

Value: 6 to 100

Description:

Font size of the current element.

Example
<span id="number">1873656</span>
var num = spinteger(document.querySelector('#number'),{
fontSize:40
});

num.val(3892382); // any number
1873656

separator

Type: string

Required: false

Default: ""(empty string)

Value: length should be from1 to 3

Description:

The separator will be inserted after every third digit. If you want number to be divided by extra space, put # as a separator.

Example
<span id="number">1873656</span>
var num = spinteger(document.querySelector('#number'),{
separator:'#',
fontSize: 24
});

num.val(3892382); // any number
1873656

tofixed

Type: number

Required: false

Default: 0

Value: 0 to 5

Description:

The number of digits to appear after the decimal point.

Example
<span id="number">1873656</span>
var num = spinteger(document.querySelector('#number'),{
separator:',',
fontSize: 24,
tofixed: 2
});

num.val(3892382.32); // any number
1873656

step

Type: number

Required: false

Default: 1

Value: 1 to 5

Description:

Step - the number of pixels that pass in one interval. Font size must be able to divide by step. The higher step, the faster your animation goes.

Example
<span id="number">1873656</span>
var num = spinteger(document.querySelector('#number'),{
separator:'#',
fontSize: 30,
tofixed: 2,
step: 5
});

num.val(3892382.32); // any number
1873656

speed

Type: number

Required: false

Default: 50

Value: 50 to 2000

Description:

Speed - interval time for your animation. The higher speed, the faster your animation goes.

Example
<span id="number">1873656</span>
var num = spinteger(document.querySelector('#number'),{
separator:'#',
fontSize: 30,
tofixed: 2,
speed: 500
});

num.val(3892382.32); // any number
1873656

before

Type: string

Required: false

Default: ''(empty string)

Value: length should be from0 to 5

Description:

Content, that will be insered before number.

Example
<span id="number">1873656</span>
var num = spinteger(document.querySelector('#number'),{
separator:'#',
fontSize: 30,
tofixed: 2,
step: 2,
before: '$'
});

num.val(3892382.32); // any number
1873656

after

Type: string

Required: false

Default: ''(empty string)

Value: length should be from0 to 5

Description:

Content, that will be insered after number.

Example
<span id="number">1873656</span>
var num = spinteger(document.querySelector('#number'),{
separator:'#',
fontSize: 30,
tofixed: 2,
step: 2,
after: '$'
});

num.val(3892382.32); // any number