jQuery Countimator Plugin Demos

Basic usage

Init the countimator-plugin:

Using inline html

You got to count it 20 times

You achieved 1430 out of 150 points

Using a template engine

Countimator supports template-engines that follow the compile-pattern such as Handlebars.

You may apply a template in three different ways:

  • Using the template-option
  • Using an inline template
  • Using a selector

Using the template-option

Using an inline template

Using a selector

Number formatting

Use the following options to format values used by countimator: decimals, decimalDelimiter,thousandDelimiter

Pad leading zeros by using the pad-option

Custom styles

Countimator has built-in support for drawing on a canvas-background.

You can customize the appearance of countimator by providing an object containing a render- and draw-method as style-option

Using the wheel plugin

Countimator is shipped with a custom wheel-style.

Add the wheel-plugin after jquery.countimator.js as well as the basic css theme

Styling the wheel plugin

You can style the wheel plugin using traditional css and the maxColor-, valueColor- and lineWidth-options. Use the verticalAlign-option if you need to style the inner border.