Animated jQuery Number Counter Plugin - Numinate

File Size: 8.76KB
Views Total: 8377
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Animated jQuery Number Counter Plugin - Numinate

Numinate is a lightweight jQuery number counter plugin that allows to count up or down to a target number at a specified speed.

See also:

Basic Usage:

1. Include the jQuery javascript library and jQuery numinate plugin on the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="numinate.1.0.1.js"></script>

2. Create a container you want to place the number counter on.

<span id="number-counter"></span>

3. Create some buttons to control the number counter by using jQuery numinate's methods.

<button onclick="$('#number-counter').numinate('start');">Start</button>
<button onclick="$('#number-counter').numinate('stop');">Stop</button>
<button onclick="$('#number-counter').numinate('restart');">Restart</button>

4. Initialize the counter with all the default settings.

<script type="text/javascript">
$(document).ready(function() {
$('#number-counter').numinate({
// Counting starts from here.
from: 0,
// Counting ends here, if any differental setted.
to: 0,

// Interval for the whole running.
// ! Overwrites the stepInterval if it's setted.
runningInterval:null,

// Interval between two step.
// If not provided will calculate from runningInterval.
stepInterval:   null,
// How many times refresh the %counter% value.
stepCount:null,
// How much a step's alters the current value.
stepUnit: null,

// The appering text, the %counter% token will be
// replaced with the actual step's value.
format: '%counter%',
// Class will be added to the counter DOM(s).
class:  'numinate',
// The step values will be rounded to this precision,
// this is directly passed to the currentValue.toFixed(precision) fn.
precision: 0,
// The counter starts on call, or do manualy.
autoStart: true,
// The counter remove itself when reaches the goal.
autoRemove: false,

// Event called when the counter has been created.
onCreate: null,
// Event called when the counter starts to count.
onStart: null,
// Event called before the counter update the step value.
onStep: null,
// Event called when the counter reached the goal, or stoped manualy.
onStop: null,
// Event called when the counter reached the goal value, or called manualy.
onComplete: null,
// Event called when the counter has been removed.
onRemove: null,
});
});
</script>

This awesome jQuery plugin is developed by greenball. For more Advanced Usages, please check the demo page or visit the official website.