A jQuery Counter Plugin

Pablo Ricco
August 3, 2012

A jQuery counter based on query-countdown with extra options like the ability to count up.

jQuery.counter screenshoot
jQuery.counter screenshoot
  • Format: fully customized using an element attribute or an init option
  • Direction: Up or Down
  • Stop: fully customized using an element attribute or an init option
  • Appearance: fully customized using CSS3
  • License: MIT


Options can be set by attribute data-<name>="value" or in the options hash on counter initialization: $(element).counter({name: value, ...})

  • direction: up|down Counter direction – default: down
  • format: string Defines the number of parts and the maximum number for each of them – default: 23:59:59
  • interval: number Sets the increment/decrement in milliseconds – default 1000
  • stop: string Sets the counter stop number – default: maximum number allowed by the format.


  • counterStop: Raised when the counter reaches the stop number
$('.counter').on('counterStop', function() {


10 seconds countdown

<span class="counter">0:10</span>
<script type="text/javascript">

120 seconds count

<span class="counter" data-direction="up" data-format="120">0</span>
<script type="text/javascript">

Binary counter stopping at 001000000 (note the spaces between the binary digits)

<span class="counter" data-direction="up" data-format="1 1 1 1 1 1 1 1" data-stop="">0 0 1 0 0 0 0 0</span>
<script type="text/javascript">


You can download jquery-counter from Github.

"A jQuery Counter Plugin" by Pablo Ricco is licensed under CC BY SA. Source code examples are licensed under MIT.

Cover photo by Loic Djim.

Categorized under open source.

Join our team

If you're passionate about building quality software and our values resonate with you, get in touch with us!