https://github.com/benignware/jquery-countimator
Animated counter
https://github.com/benignware/jquery-countimator
Last synced: 11 months ago
JSON representation
Animated counter
- Host: GitHub
- URL: https://github.com/benignware/jquery-countimator
- Owner: benignware
- Created: 2014-04-15T16:40:58.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2015-10-14T11:09:39.000Z (over 10 years ago)
- Last Synced: 2023-08-12T18:37:44.818Z (almost 3 years ago)
- Language: JavaScript
- Size: 272 KB
- Stars: 28
- Watchers: 6
- Forks: 12
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
jquery-countimator
==================
> Animated counter
[Demo](http://benignware.github.io/jquery-countimator)
## Usage
Include dependencies.
```html
```
```js
$(function() {
$(".counter").countimator();
});
```
```html
You got to count it 1000 times
```
### Using inline html
```html
You achieved 120
out of 1000 points
```
### Using a template-engine
Countimator supports templates with [Handlebars](http://handlebarsjs.com/)
Include handlebars as dependency:
```html
```
You may apply a template in three different ways:
* Using the template-option
* Using an inline template
* Using a selector
#### Using the template-option
```html+handlebars
```
#### Using an inline template
```html+handlebars
You achieved <kbd>{{count}}</kbd> out of <kbd>{{max}}</kbd> points.
```
#### Using a selector
```html+handlebars
You achieved <kbd>{{count}}</kbd> out of <kbd>{{max}}</kbd> points.
```
Number formatting
-----------------
Use the following options to format values used by countimator: `decimals`, `decimalDelimiter`,`thousandDelimiter`
```html
0 EUR
```
Pad leading zeros by using the `pad`-option
```html
000 %
```
## Trigger update
To trigger the animation from an event at runtime, just call countimator again with a new value:
```html
0 EUR
Want more?
```
```js
$('#update-counter').on('click', function() {
$(this).fadeOut(500).prev().countimator({
value: 22000.12
});
});
```
## Callbacks
Get notified when animation changes by providing a callback function to `start`, `step` or `complete`-option.
```html
You achieved 0 out of 1000 points.
```
```css
.counter-callbacks {
transition: all 0.5s ease-out;
position: relative;
top: 0;
opacity: 1;
}
.counter-callbacks:after {
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
opacity: 0;
content: "New Highscore!";
font-size: 60%;
vertical-align: top;
background: #ddd;
border-radius: 4px;
padding: 4px;
}
.counter-callbacks.highscore:after {
opacity: 1;
}
.counter-callbacks.highscore {
color: teal;
}
.counter-callbacks.running,
.counter-callbacks.complete {
font-size: 22px;
}
.counter-callbacks.complete {
top: -1em;
opacity: 0;
transition-duration: 2s;
transition-delay: 1s;
}
```
```js
$('.counter-callbacks').countimator({
start: function(count, options) {
$(this).toggleClass('running');
},
step: function(count, options) {
$(this).toggleClass('highscore', count > $(this).data('highscore'));
},
complete: function() {
$(this).toggleClass('running');
$(this).toggleClass('complete');
}
});
```
## Wheel
Countimator is shipped with a custom wheel-style.
Add the wheel-plugin after jquery.countimator.js
```html
```
Include the wheel stylesheet.
```html
```
```html
0
```
```css
.counter-wheel {
color: teal;
}
```
### Customize
See the following code for an example of using the wheel-plugin with styles, callbacks and triggers:
```html
Your
00/12
Score
Click me!
```
Customize appearance using css:
```css
.counter-wheel-callbacks {
width: 200px;
height: 200px;
border-color: #ddd;
border-width: 10px;
background: #101433;
text-transform: uppercase;
font-family: inherit;
font-size: 16px;
padding: 15px;
line-height: 28px;
}
.counter-wheel-callbacks .counter-wheel-content {
background: #fff;
color: #000;
}
.counter-wheel-callbacks .counter-wheel-content > div {
font-weight: bold;
font-size: 32px;
}
.counter-wheel-callbacks .counter-wheel-content > div > * {
margin: 0 5px;
}
.counter-wheel-callbacks .counter-wheel-highlight {
transition: all .25s ease-in;
-webkit-transition: all .25s ease-in;
color: #E71232;
}
.counter-level-warn .counter-wheel-highlight {
color: orange;
}
.counter-level-ok .counter-wheel-highlight {
color: green;
}
```
Initialize countimator with callbacks and register button listener
```js
$(function() {
$('.counter-wheel-callbacks').countimator({
step: function(count, options) {
var
p = count / options.max;
$(this).toggleClass('counter-level-ok', p >= 0.5);
$(this).toggleClass('counter-level-warn', p >= 0.25 && p < 0.5);
$(this).toggleClass('counter-level-critical', p < 0.25);
}
});
$('.counter-wheel-callbacks + button').on('click', function() {
var countimator = $('.counter-wheel-callbacks').data('countimator');
$(this).fadeOut(500).prev().countimator({
value: 8
});
});
});
```
## Options
Name
Description
animateOnAppear
Specifies whether to start animation when scrolled into view. Defaults to `true`
animateOnInit
Specifies whether to start animation when initialized. Defaults to `true`
complete
Callback function to be executed when animation completes.
count
Current animation count. Updated on step. Defaults to `0`
countSelector
Specifies the selector of count element. Defaults to `'.counter-count'`
decimals
Specifies the number of decimals for number formatting. Defaults to `0`
decimalDelimiter
Specifies a decimal separator for number formatting. Defaults to `.`
duration
Specifies the animation duration in milliseconds. Defaults to `1400`
engine
Specifies the template engine to use. `Handlebars` used, if defined
max
Specifies the maximum value of the animation. Defaults to `0`
maxSelector
Specifies the selector of maximum element. Defaults to `'.counter-max'`
min
Specifies the minimum value of the animation. Defaults to `null`
pad
Specifies the number of digits to be padded with leading zeros
start
Callback function to be executed when animation starts.
step
Callback function to be executed when animation on animation step.
style
Specifies a custom style. Either provide a string identifier of a predefined style or an object containing a `render`-method.
template
Either specifies an inline-template or a selector for dom-template.
thousandDelimiter
Specifies a thousand delimiter for number formatting. Defaults to `null`
value
Specifies the target value of the animation. Defaults to `null`