{"id":17914214,"url":"https://github.com/knadh/tinyprogressbar","last_synced_at":"2025-06-13T20:06:40.250Z","repository":{"id":19658886,"uuid":"22911870","full_name":"knadh/tinyprogressbar","owner":"knadh","description":"tinyProgressbar is an extremely tiny (640 bytes minified+gzipped) Javascript progressbar library","archived":false,"fork":false,"pushed_at":"2014-08-13T10:30:27.000Z","size":124,"stargazers_count":17,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-04T16:53:36.049Z","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/knadh.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-08-13T10:28:53.000Z","updated_at":"2025-05-31T10:28:47.000Z","dependencies_parsed_at":"2022-08-21T14:01:21.986Z","dependency_job_id":null,"html_url":"https://github.com/knadh/tinyprogressbar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/knadh/tinyprogressbar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knadh%2Ftinyprogressbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knadh%2Ftinyprogressbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knadh%2Ftinyprogressbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knadh%2Ftinyprogressbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/knadh","download_url":"https://codeload.github.com/knadh/tinyprogressbar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knadh%2Ftinyprogressbar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259712410,"owners_count":22900038,"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","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":"2024-10-28T19:56:52.754Z","updated_at":"2025-06-13T20:06:40.209Z","avatar_url":"https://github.com/knadh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tinyProgressbar\r\ntinyProgressbar is an extremely tiny (640 bytes minified+gzipped) Javascript progressbar library.\r\n\r\nIt renders nice, flat progressbars fully customizable with CSS. It can display absolute values (eg: 25/300) or percentages (eg: 5%) on a progressbar. It also animates progression using CSS transitions.\r\n\r\nKailash Nadh, October 2014\r\n\r\nLicense:\tMIT License\r\n\r\nDocumentation and Demo: http://nadh.in/code/tinyprogressbar\r\n\r\n## Usage\r\n\r\n##### Include scripts in the \u0026lt;head\u0026gt;\r\n\u003cpre\u003e\r\n\u0026lt;link rel=\u0026quot;stylesheet\u0026quot; type=\u0026quot;text/css\u0026quot; href=\u0026quot;path/tinyprogressbar.css\u0026quot;/\u0026gt;\r\n\u0026lt;script type=\u0026quot;text/javascript\u0026quot; src=\u0026quot;path/tinyprogressbar.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\r\n\u003c/pre\u003e\r\n\r\n#####  Add the container to be rendered as the progress bar\r\n\u003cpre\u003e\r\n \u0026lt;p id=\u0026quot;progress\u0026quot; data-min=\u0026quot;0\u0026quot; data-max=\u0026quot;200\u0026quot; data-mode=\u0026quot;absolute\u0026quot;\u0026gt; \u0026lt;/p\u0026gt;\r\n \r\n // OR -\u003e data attributes are optional. They can be manipulated with Javascript\r\n  \u0026lt;p id=\u0026quot;progress\u0026quot;\u0026gt; \u0026lt;/p\u0026gt;\r\n\u003c/pre\u003e\r\n##### Initialize and use\r\n\u003cpre\u003e\r\n\u0026lt;script\u0026gt;\r\n\t// initialize\r\n\tvar bar = new tinyProgressbar(document.getElementById(\u0026quot;progress\u0026quot;));\r\n\r\n\t// set min and max values from javascript (or use data attribute in the HTML)\r\n\tbar.setMinMax(0, 100);\r\n\r\n\t// set the mode (absolute = absolute numbers, percentage = percentage value %)\r\n\t// or use data-mode to set it in HTML\r\n\tbar.setMode(\"percentage\");\r\n\r\n\t// that's it! move the bar\r\n\tbar.progress(30);\r\n\r\n\u0026lt;/script\u0026gt;\r\n\u003c/pre\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknadh%2Ftinyprogressbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknadh%2Ftinyprogressbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknadh%2Ftinyprogressbar/lists"}