{"id":13519335,"url":"https://github.com/jacoborus/nanobar","last_synced_at":"2025-05-14T10:06:30.895Z","repository":{"id":57307839,"uuid":"17107214","full_name":"jacoborus/nanobar","owner":"jacoborus","description":"Very lightweight progress bars. No jQuery","archived":false,"fork":false,"pushed_at":"2020-03-01T17:11:34.000Z","size":96,"stargazers_count":2833,"open_issues_count":14,"forks_count":266,"subscribers_count":54,"default_branch":"master","last_synced_at":"2025-05-11T04:22:07.794Z","etag":null,"topics":["minimalist","progressbar"],"latest_commit_sha":null,"homepage":"http://nanobar.jacoborus.codes","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/jacoborus.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":"2014-02-23T11:55:14.000Z","updated_at":"2025-05-04T20:15:32.000Z","dependencies_parsed_at":"2022-09-09T13:22:11.740Z","dependency_job_id":null,"html_url":"https://github.com/jacoborus/nanobar","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacoborus%2Fnanobar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacoborus%2Fnanobar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacoborus%2Fnanobar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacoborus%2Fnanobar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jacoborus","download_url":"https://codeload.github.com/jacoborus/nanobar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254119471,"owners_count":22017951,"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":["minimalist","progressbar"],"created_at":"2024-08-01T05:01:57.425Z","updated_at":"2025-05-14T10:06:30.847Z","avatar_url":"https://github.com/jacoborus.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Top Progress Bar","UI","Loading Status","others","Loading Status [🔝](#readme)","13. 页面交互","加载状态","Uncategorized"],"sub_categories":["Runner","13.6 进度条/加载动画(Loading) ###","运行器","13.6 进度条/加载动画(Loading)","Uncategorized","运行器e2e测试"],"readme":"![nanobar](https://raw.githubusercontent.com/jacoborus/nanobar/master/brand/nanobar.png 'nanobar logo')\n=======================================================================================================\n\nVery lightweight progress bars (~699 bytes gzipped).\n\nCompatibility: iE7+ and the rest of the world\n\n[![npm version](https://badge.fury.io/js/nanobar.svg)](https://www.npmjs.com/package/nanobar) [![Bower version](https://img.shields.io/bower/v/nanobar.svg?maxAge=2592000)](https://github.com/jacoborus/nanobar/releases)\n\n## Demo\n\nSee [nanobar.jacoborus.codes](http://nanobar.jacoborus.codes)\n\n\n## Installation\n\nDownload and extract the [latest release](https://github.com/jacoborus/nanobar/archive/master.zip) or install with package manager:\n\n[Bower](http://bower.io/):\n\n```\n$ bower install nanobar\n```\n\n[npm](https://www.npmjs.org/package/nanobar):\n\n```\n$ npm install nanobar\n```\n\n\n## Usage\n\n### Load\n\nLink `nanobar.js` from your html file\n\n```html\n\u003cscript src=\"path/to/nanobar.min.js\"\u003e\u003c/script\u003e\n```\n\nor require it:\n\n```js\nvar Nanobar = require('path/to/nanobar');\n```\n\n### Generate progressbar\n\n```js\nvar nanobar = new Nanobar( options );\n```\n\n**options**\n\n- `id` `\u003cString\u003e`: (optional) id for **nanobar** div\n- `classname` `\u003cString\u003e`: (optional) class for **nanobar** div\n- `target` `\u003cDOM Element\u003e`: (optional) Where to put the progress bar, **nanobar** will be fixed to top of document if no `target` is passed\n\n\n### Move bar\n\nResize the bar with `nanobar.go(percentage)`\n\n**arguments**\n\n- `percentage` `\u003cNumber\u003e` : percentage width of nanobar\n\n\n## Example\n\nCreate bar\n\n```js\nvar options = {\n\tclassname: 'my-class',\n  id: 'my-id',\n\ttarget: document.getElementById('myDivId')\n};\n\nvar nanobar = new Nanobar( options );\n\n//move bar\nnanobar.go( 30 ); // size bar 30%\nnanobar.go( 76 ); // size bar 76%\n\n// size bar 100% and and finish\nnanobar.go(100);\n```\n\n### Customize bars\n\nNanobar injects a style tag in your HTML head. Bar divs has class `.bar`, and its containers `.nanobar`, so you can overwrite its values.\n\nDefault css:\n\n```css\n.nanobar {\n  width: 100%;\n  height: 4px;\n  z-index: 9999;\n  top:0\n}\n.bar {\n  width: 0;\n  height: 100%;\n  transition: height .3s;\n  background:#000;\n}\n```\n\nYou should know what to do with that ;)\n\n\n\u003cbr\u003e\u003cbr\u003e\n\n---\n\n© 2016 [jacoborus](https://github.com/jacoborus) - Released under [MIT License](https://raw.github.com/jacoborus/nanobar/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacoborus%2Fnanobar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacoborus%2Fnanobar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacoborus%2Fnanobar/lists"}