{"id":30107072,"url":"https://github.com/benignware/jquery-countimator","last_synced_at":"2025-08-10T01:33:03.176Z","repository":{"id":16063323,"uuid":"18807594","full_name":"benignware/jquery-countimator","owner":"benignware","description":"Animated counter","archived":false,"fork":false,"pushed_at":"2015-10-14T11:09:39.000Z","size":279,"stargazers_count":28,"open_issues_count":3,"forks_count":12,"subscribers_count":6,"default_branch":"master","last_synced_at":"2023-08-12T18:37:44.818Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benignware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-04-15T16:40:58.000Z","updated_at":"2023-08-12T18:37:44.819Z","dependencies_parsed_at":"2022-08-31T13:10:40.474Z","dependency_job_id":null,"html_url":"https://github.com/benignware/jquery-countimator","commit_stats":null,"previous_names":[],"tags_count":1,"template":null,"template_full_name":null,"purl":"pkg:github/benignware/jquery-countimator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fjquery-countimator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fjquery-countimator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fjquery-countimator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fjquery-countimator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benignware","download_url":"https://codeload.github.com/benignware/jquery-countimator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fjquery-countimator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269663319,"owners_count":24455801,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-09T02:00:10.424Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-10T01:32:14.849Z","updated_at":"2025-08-10T01:33:03.090Z","avatar_url":"https://github.com/benignware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"jquery-countimator\n==================\n\n\u003e Animated counter\n\n[Demo](http://benignware.github.io/jquery-countimator)\n\n## Usage\n\nInclude dependencies.\n\n```html\n\u003cscript src=\"http://code.jquery.com/jquery-1.11.2.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/jquery.countimator.min.js\"\u003e\u003c/script\u003e\n```\n\n```js\n$(function() {\n  $(\".counter\").countimator();\n});\n```\n\n```html\nYou got to count it \u003ckbd class=\"counter counter-default\"\u003e1000\u003c/kbd\u003e times\n```\n\n### Using inline html\n```html\n\u003cspan class=\"counter counter-default\"\u003e\n You achieved \u003ckbd class=\"counter-count\"\u003e120\u003c/kbd\u003e\n out of \u003ckbd class=\"counter-max\"\u003e1000\u003c/kbd\u003e points\n\u003c/span\u003e\n```\n\n### Using a template-engine\nCountimator supports templates with [Handlebars](http://handlebarsjs.com/) \n\nInclude handlebars as dependency:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.3/handlebars.min.js\"\u003e\u003c/script\u003e\n```\n\nYou may apply a template in three different ways:\n\n* Using the template-option\n* Using an inline template\n* Using a selector\n\n#### Using the template-option\n```html+handlebars\n\u003cdiv class=\"counter counter-default\" \n  data-value=\"120\" \n  data-max=\"1000\" \n  data-template=\"You achieved \u003ckbd\u003e{{count}}\u003c/kbd\u003e out of \u003ckbd\u003e{{max}}\u003c/kbd\u003e points.\"\u003e\n\u003c/div\u003e\n```\n\n#### Using an inline template\n```html+handlebars\n\u003cdiv class=\"counter counter-default\" \n  data-value=\"120\" \n  data-max=\"1000\"\u003e\n \u003cscript type=\"text/x-handlebars-template\"\u003e\n   You achieved \u003ckbd\u003e{{count}}\u003c/kbd\u003e out of \u003ckbd\u003e{{max}}\u003c/kbd\u003e points.\n \u003c/script\u003e\n\u003c/div\u003e\n```\n\n#### Using a selector\n```html+handlebars\n\u003cdiv class=\"counter counter-default\" \n  data-template=\"#counter-template\" \n  data-value=\"120\" \n  data-max=\"1000\"\u003e\n\u003c/div\u003e\n\u003cscript id=\"counter-template\" type=\"text/x-handlebars-template\"\u003e\n   You achieved \u003ckbd\u003e{{count}}\u003c/kbd\u003e out of \u003ckbd\u003e{{max}}\u003c/kbd\u003e points.\n\u003c/script\u003e\n```\n\nNumber formatting\n-----------------\nUse the following options to format values used by countimator: `decimals`, `decimalDelimiter`,`thousandDelimiter`\n```html\n\u003ckbd class=\"counter counter-default\" \n  data-decimals=\"2\" \n  data-decimal-delimiter=\",\" \n  data-thousand-delimiter=\".\" \n  data-value=\"12000.32\" \n  data-template=\"{{count}} EUR\"\u003e0 EUR\n\u003c/kbd\u003e\n```\nPad leading zeros by using the `pad`-option\n\n```html\n\u003ckbd class=\"counter counter-default badge\" \n  data-value=\"100\" \n  data-pad=\"3\" \n  data-template=\"{{count}} %\"\u003e000 %\n\u003c/kbd\u003e\n```\n\n## Trigger update\n\nTo trigger the animation from an event at runtime, just call countimator again with a new value:\n\n```html\n\u003ckbd class=\"counter counter-default\" \n  data-decimals=\"2\" \n  data-decimal-delimiter=\",\" \n  data-thousand-delimiter=\".\" \n  data-value=\"12000.32\" \n  data-template=\"{{count}} EUR\"\u003e0 EUR\n\u003c/kbd\u003e\n\u003cbutton id=\"update-counter\"\u003e\n  Want more?\n\u003c/button\u003e\n```\n\n```js\n$('#update-counter').on('click', function() {\n  $(this).fadeOut(500).prev().countimator({\n    value: 22000.12\n  });\n}); \n```\n\n## Callbacks\n\nGet notified when animation changes by providing a callback function to `start`, `step` or `complete`-option.\n\n```html\n\u003cdiv class=\"counter-callbacks\" \n  data-duration=\"2500\" \n  data-value=\"120\" \n  data-pad=\"3\"\n  data-highscore=\"65\"\u003e\n  You achieved \u003ckbd class=\"counter-count\"\u003e0\u003c/kbd\u003e out of \u003ckbd class=\"counter-max\"\u003e1000\u003c/kbd\u003e points.\n\u003c/div\u003e\n```\n\n```css\n.counter-callbacks {\n  transition: all 0.5s ease-out; \n  position: relative;\n  top: 0;\n  opacity: 1;\n}\n.counter-callbacks:after {\n  transition: all 0.5s ease-out;\n  -webkit-transition: all 0.5s ease-out;\n  opacity: 0;\n  content: \"New Highscore!\";\n  font-size: 60%;\n  vertical-align: top;\n  background: #ddd;\n  border-radius: 4px;\n  padding: 4px;\n}\n.counter-callbacks.highscore:after {\n  opacity: 1;\n}\n.counter-callbacks.highscore {\n  color: teal;\n}\n.counter-callbacks.running,\n.counter-callbacks.complete {\n  font-size: 22px;\n}\n.counter-callbacks.complete {\n  top: -1em;\n  opacity: 0;\n  transition-duration: 2s;\n  transition-delay: 1s;\n}\n```\n\n```js\n$('.counter-callbacks').countimator({\n  start: function(count, options) {\n    $(this).toggleClass('running');\n  },\n  step: function(count, options) {\n    $(this).toggleClass('highscore', count \u003e $(this).data('highscore'));\n  },\n  complete: function() {\n    $(this).toggleClass('running');\n    $(this).toggleClass('complete');\n  }\n});\n```\n\n\n## Wheel\n\nCountimator is shipped with a custom wheel-style.\n\nAdd the wheel-plugin after jquery.countimator.js\n\n```html\n\u003cscript src=\"js/jquery.countimator.wheel.min.js\"\u003e\u003c/script\u003e\n```\n\nInclude the wheel stylesheet.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"css/jquery.countimator.wheel.css\"\u003e\u003c/link\u003e\n```\n\n```html\n\u003cdiv class=\"counter counter-wheel\" \n data-style=\"wheel\" \n data-max=\"12\" \n data-value=\"10\"\n data-count=\"0\"  \n data-pad=\"2\"\u003e0\n\u003c/div\u003e\n```\n\n```css\n.counter-wheel {\n  color: teal;\n}\n```\n\n### Customize\n\nSee the following code for an example of using the wheel-plugin with styles, callbacks and triggers:\n\n```html\n\u003cdiv class=\"counter-wheel counter-wheel-callbacks\" \n data-style=\"wheel\" \n data-max=\"12\" \n data-value=\"2\" \n data-pad=\"2\"\u003e\n  \u003cdiv class=\"counter-wheel-content\"\u003e\n    \u003csmall\u003eYour\u003c/small\u003e\u003cbr/\u003e\n    \u003cdiv\u003e\u003cspan class=\"counter-count counter-wheel-highlight\"\u003e00\u003c/span\u003e/\u003cspan class=\"counter-max\"\u003e12\u003c/span\u003e\u003c/div\u003e\n    \u003csmall\u003eScore\u003c/small\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cbutton\u003eClick me!\u003c/button\u003e\n```\n\nCustomize appearance using css:\n\n```css\n.counter-wheel-callbacks {\n  width: 200px;\n  height: 200px;\n  border-color: #ddd;\n  border-width: 10px;\n  background: #101433;\n  text-transform: uppercase;\n  font-family: inherit;\n  font-size: 16px;\n  padding: 15px;\n  line-height: 28px;\n}\n\n.counter-wheel-callbacks .counter-wheel-content {\n  background: #fff;\n  color: #000;\n}\n\n.counter-wheel-callbacks .counter-wheel-content \u003e div {\n  font-weight: bold;\n  font-size: 32px;\n}\n\n.counter-wheel-callbacks .counter-wheel-content \u003e div \u003e * {\n  margin: 0 5px;\n}\n\n.counter-wheel-callbacks .counter-wheel-highlight {\n  transition: all .25s ease-in;\n  -webkit-transition: all .25s ease-in;\n  color: #E71232;\n}\n\n.counter-level-warn .counter-wheel-highlight {\n  color: orange;\n}\n\n.counter-level-ok .counter-wheel-highlight {\n  color: green;\n}\n```\n\nInitialize countimator with callbacks and register button listener\n```js\n$(function() {\n  $('.counter-wheel-callbacks').countimator({\n    step: function(count, options) {\n      var\n        p = count / options.max;\n      $(this).toggleClass('counter-level-ok', p \u003e= 0.5);\n      $(this).toggleClass('counter-level-warn', p \u003e= 0.25 \u0026\u0026 p \u003c 0.5);\n      $(this).toggleClass('counter-level-critical', p \u003c 0.25);\n    }\n  });\n  $('.counter-wheel-callbacks + button').on('click', function() {\n    var countimator = $('.counter-wheel-callbacks').data('countimator');\n    $(this).fadeOut(500).prev().countimator({\n      value: 8\n    });\n  });\n});\n```\n\n## Options\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eName\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eanimateOnAppear\u003c/td\u003e\n      \u003ctd\u003eSpecifies whether to start animation when scrolled into view. Defaults to `true`\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eanimateOnInit\u003c/td\u003e\n      \u003ctd\u003eSpecifies whether to start animation when initialized. Defaults to `true`\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecomplete\u003c/td\u003e\n      \u003ctd\u003eCallback function to be executed when animation completes.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecount\u003c/td\u003e\n      \u003ctd\u003eCurrent animation count. Updated on step. Defaults to `0`\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ecountSelector\u003c/td\u003e\n      \u003ctd\u003eSpecifies the selector of count element. Defaults to `'.counter-count'`\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edecimals\u003c/td\u003e\n      \u003ctd\u003eSpecifies the number of decimals for number formatting. Defaults to `0`\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edecimalDelimiter\u003c/td\u003e\n      \u003ctd\u003eSpecifies a decimal separator for number formatting. Defaults to `.`\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eduration\u003c/td\u003e\n      \u003ctd\u003eSpecifies the animation duration in milliseconds. Defaults to `1400`\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eengine\u003c/td\u003e\n      \u003ctd\u003eSpecifies the template engine to use. `Handlebars` used, if defined\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emax\u003c/td\u003e\n      \u003ctd\u003eSpecifies the maximum value of the animation. Defaults to `0`\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emaxSelector\u003c/td\u003e\n      \u003ctd\u003eSpecifies the selector of maximum element. Defaults to `'.counter-max'`\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003emin\u003c/td\u003e\n      \u003ctd\u003eSpecifies the minimum value of the animation. Defaults to `null`\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003epad\u003c/td\u003e\n      \u003ctd\u003eSpecifies the number of digits to be padded with leading zeros\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003estart\u003c/td\u003e\n      \u003ctd\u003eCallback function to be executed when animation starts.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003estep\u003c/td\u003e\n      \u003ctd\u003eCallback function to be executed when animation on animation step.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003estyle\u003c/td\u003e\n      \u003ctd\u003eSpecifies a custom style. Either provide a string identifier of a predefined style or an object containing a `render`-method.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003etemplate\u003c/td\u003e\n      \u003ctd\u003eEither specifies an inline-template or a selector for dom-template.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ethousandDelimiter\u003c/td\u003e\n      \u003ctd\u003eSpecifies a thousand delimiter for number formatting. Defaults to `null`\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003evalue\u003c/td\u003e\n      \u003ctd\u003eSpecifies the target value of the animation. Defaults to `null`\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenignware%2Fjquery-countimator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenignware%2Fjquery-countimator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenignware%2Fjquery-countimator/lists"}