{"id":19475260,"url":"https://github.com/yunisdev/vanilla-counter","last_synced_at":"2026-06-20T10:31:08.389Z","repository":{"id":57390651,"uuid":"327818675","full_name":"yunisdev/vanilla-counter","owner":"yunisdev","description":"Lightweight JS library to create counters","archived":false,"fork":false,"pushed_at":"2021-01-08T07:54:07.000Z","size":8,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-01T09:07:39.723Z","etag":null,"topics":["counter","javascript","vanilla-counter","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://yunisdev.github.io/vanilla-counter/","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/yunisdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-08T06:32:22.000Z","updated_at":"2021-05-21T07:24:29.000Z","dependencies_parsed_at":"2022-09-01T15:57:15.658Z","dependency_job_id":null,"html_url":"https://github.com/yunisdev/vanilla-counter","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/yunisdev/vanilla-counter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunisdev%2Fvanilla-counter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunisdev%2Fvanilla-counter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunisdev%2Fvanilla-counter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunisdev%2Fvanilla-counter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yunisdev","download_url":"https://codeload.github.com/yunisdev/vanilla-counter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunisdev%2Fvanilla-counter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34566920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-20T02:00:06.407Z","response_time":98,"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":["counter","javascript","vanilla-counter","vanilla-javascript"],"created_at":"2024-11-10T19:31:20.297Z","updated_at":"2026-06-20T10:31:08.375Z","avatar_url":"https://github.com/yunisdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vanilla Counter\n\nLightweight JS library to create counters.\n\n### Installation\n\nAdd `vanilla-counter` to `head` tag:\n\n```html\n\u003chead\u003e\n    \u003cscript src=\"https://unpkg.com/vanilla-counter\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n### Usage\n\nFirst create a element with `data-vanilla-counter` attribute. This attribute will help `vanilla-counter` to recognize elements.\n\n```html\n\u003cspan data-vanilla-counter\u003e\u003c/span\u003e\n```\n\nYou can also add following attributes:\n\n| Attribute | Default | Optional | Details |\n| --------: | ------: | ----------: | -------: |\n| data-start-at | -- | `false` | Where to start count |\n| data-end-at | -- | `false` | Where to end count |\n| data-delay | 0 | `true` | Delay on animation start |\n| data-time | 1000 | `true` | Time length of animation |\n| data-format | {} | `true` | Counter will replace `{}` with number. Ex: `{}%` will be rendered as `100%`. **Note: You can not add any character or space inside curly braces, otherwise it will not work.**\n\nExample,\n\n```html\n\u003cspan \n    data-vanilla-counter \n    data-start-at=\"0\" \n    data-end-at=\"100\" \n    data-time=\"10000\" \n    data-delay=\"0\" \n    data-format=\"{}%\"\n\u003e \u003c/span\u003e\n```\n\nYou can also use inner html for format. Example:\n\n```html\n\u003cspan \n    data-vanilla-counter \n    data-start-at=\"0\" \n    data-end-at=\"100\" \n    data-time=\"10000\" \n    data-delay=\"0\"\n\u003e{}%\u003c/span\u003e\n```\n\nBut remember that `data-format` way is first case. So, if you use both methods, counter will get `data-format` value.\n\n#### Initialize\n\nAfter adding elements, don't forget to initialize.\n\n```html\n\u003cbody\u003e\n    \u003c!-- ... --\u003e\n    \u003cscript\u003e\n        VanillaCounter();\n    \u003c/script\u003e\n\u003c/body\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunisdev%2Fvanilla-counter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyunisdev%2Fvanilla-counter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunisdev%2Fvanilla-counter/lists"}