{"id":30420756,"url":"https://github.com/skybrud/sky-count","last_synced_at":"2025-08-22T08:20:07.507Z","repository":{"id":57142199,"uuid":"137334466","full_name":"skybrud/sky-count","owner":"skybrud","description":"Vue component for intelligently animating counting of numbers","archived":false,"fork":false,"pushed_at":"2018-09-16T18:48:54.000Z","size":179,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-07-11T23:46:41.196Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skybrud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-14T09:09:58.000Z","updated_at":"2018-09-16T18:48:55.000Z","dependencies_parsed_at":"2022-09-05T10:02:01.432Z","dependency_job_id":null,"html_url":"https://github.com/skybrud/sky-count","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/skybrud/sky-count","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-count","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-count/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-count/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-count/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skybrud","download_url":"https://codeload.github.com/skybrud/sky-count/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-count/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271606605,"owners_count":24788981,"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-22T02:00:08.480Z","response_time":65,"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-22T08:20:05.535Z","updated_at":"2025-08-22T08:20:07.454Z","avatar_url":"https://github.com/skybrud.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sky-count\n\u003e Count to infinity and beyond (well, close enough at least)\n\n## Description\nSkyCount is a simple component that takes any string containing numbers, such as `\"1.234.000\"` or `\"23.5%\"`, and animates a counter from 0 to the given value while retaining all non-digit characters. This enables you to easily append or prepend text and symbols to the counted number or control the way numbers are chunked (English style `\"000,000.00\"` vs German etc. `\"000.000,00\"`).\n\n## Installation\n```bash\nnpm install sky-count\n```\nor\n```bash\nyarn add sky-count\n```\n\n## Usage\nBegin by importing and installing the SkyCount Vue plugin:\n```js\nimport Vue from 'vue';\nimport SkyCount from 'sky-count';\n\nVue.use(SkyCount);\n\n```\nThe `\u003csky-count\u003e` component registers globally and can now be used. It's primary interface is the `trigger` prop, which it watches. When it is true, it counts upwards towards the value of the `to` prop (retaining its non-digit characters while animating).\n\nBasic example:\n``` html\n\u003csky-count\n    :trigger=\"myBooleanValue\" // triggers the animation when true\n    :to=\"'1,234,000 users'\" // this is our target\n/\u003e\n```\n\nThe number kan also be padded with zeros, so the string length is kept the same throughout the animation. This will make the animation look less \"jittery\" but might not always be what you're going for.\n``` html\n\u003csky-count\n    :trigger=\"myBooleanValue\"\n    :to=\"'1,234,000 users'\"\n    :pad=\"true\" // pad with zeros\n/\u003e\n```\n\nIf you want to pad the number with something else than zeros you can do so like this:\n``` html\n\u003csky-count\n    :trigger=\"myBooleanValue\"\n    :to=\"'1,234,000 users'\"\n    :pad=\"'-'\" // we now pad with dashes instead\n/\u003e\n```\n\nIf you want to start the animation from another value than zero this is also possible:\n``` html\n\u003csky-count\n    :trigger=\"myBooleanValue\"\n    :to=\"'1,234,000 users'\"\n    :start=\"1000\" // the animation starts at \"1,000\"\n/\u003e\n```\n\nThe animation can also be customized:\n``` html\n\u003csky-count\n    :trigger=\"myBooleanValue\"\n    :to=\"'1,234,000 users'\"\n    :delay=\"200\" // 200ms\n    :duration=\"500\" // 500ms\n    :ease=\"'easeInOutCubic'\" // 'easeInOutSine', 'easeOutExpo', 'easeInQuad', 'linear' etc.\n/\u003e\n```\n\nLastly, you can make the number continue slowly incrementing after the animation is done (A simple setInterval under the hood for now).\n``` html\n\u003csky-count\n    :trigger=\"myBooleanValue\"\n    :to=\"'1,234,000 users'\"\n    :keepCounting=\"{ delay: 2000, add: 10 }\" // when the animation is done the number is incremented by 10 every 2000ms\n/\u003e\n```\n\n# Credits\nThis module is made by the Frontenders at [skybrud.dk](http://www.skybrud.dk/). Feel free to use it in any way you want. Feedback, questions and bugreports should be posted as issues. Pull-requests appreciated!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskybrud%2Fsky-count","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskybrud%2Fsky-count","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskybrud%2Fsky-count/lists"}