{"id":13620689,"url":"https://github.com/nichenqin/loadbar","last_synced_at":"2025-03-19T12:30:30.296Z","repository":{"id":137128736,"uuid":"93976862","full_name":"nichenqin/loadbar","owner":"nichenqin","description":"Vanilla javascript progress bar for browser, no css file, no dependency.","archived":false,"fork":false,"pushed_at":"2017-06-18T05:55:27.000Z","size":144,"stargazers_count":24,"open_issues_count":0,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-09T00:12:38.071Z","etag":null,"topics":["ajax","loader","progress-bar","progressbar"],"latest_commit_sha":null,"homepage":"http://nichenqin.com/loadbar/","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/nichenqin.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-06-11T02:27:10.000Z","updated_at":"2023-11-07T12:45:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"f873035a-11c3-449b-ab01-3d5d2713a3ad","html_url":"https://github.com/nichenqin/loadbar","commit_stats":null,"previous_names":["nichenqin1001/loadbar"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichenqin%2Floadbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichenqin%2Floadbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichenqin%2Floadbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichenqin%2Floadbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nichenqin","download_url":"https://codeload.github.com/nichenqin/loadbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243989419,"owners_count":20379648,"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":["ajax","loader","progress-bar","progressbar"],"created_at":"2024-08-01T21:00:58.486Z","updated_at":"2025-03-19T12:30:30.052Z","avatar_url":"https://github.com/nichenqin.png","language":"JavaScript","funding_links":[],"categories":["ajax"],"sub_categories":[],"readme":"# loadbar\n\nLight weight load bar, vanilla javascript, no css file, no dependency.\n\n## Installation\n\n```bash\nnpm install loadbar --save\nyarn add loadbar\n```\n\n## Demo\n\n[Live Demo](http://nichenqin.com/loadbar/)\n\n## Usage\n\n### Basic\n\n```javascript\n...\n\nvar loadbar = new Loadbar();\n\nloadbar.start();\nloadbar.done();\n\n...\n```\n\n### Basic Example\n\n```javascript\n...\n\nvar Loadbar = require('loadbar'); // commonjs\nvar loadbar = new Loadbar();\n\nwindow.onload = loadbar.start();\nsetTimeout(function() { loadbar.done(); }, 1000);\n\n...\n```\n\nIf no argument provided, loadbar will create an element which fixed at the top of screen.\n\n### Advanced Ajax Example\n\n```javascript\n\nvar axios = require('axios');\nvar Loadbar = require('loadbar');\n\nvar loadbar = new Loadbar();\n\n...\naxios.get(url)\n  .then(() =\u003e { loadbar.start() })\n  .then(() =\u003e { loadbar.growTo(80) }) // Value should between 0 and 100.\n  .then(() =\u003e { loadbar.done(); })\n...\n```\n\n### Other API\n\n```javascript\nloadbar.pause(); // Bar will stop animating.\nloadbar.stop(); // Bar will fade out and the bar element will be removed from parent(call loadbar.destroy())\nloadbar.loading(); // start to load a little bit\n```\n\n## Custom Configuration\n\n```javascript\nvar loadbar = new Loadbar(options, element);\n```\n\nBoth two arguments are **not** required.\n\n### options\n\n#### options.height\n\n  type: `\u003cString\u003e`\n\n  Height of the bar, limited within 4px.\n\n  Default: `2px`\n\n#### options.backgroundColor\n\n  type: `\u003cString\u003e`\n\n  Color of bar.\n\n  Default: `#000`\n\n#### options.easeFunction\n\n  type: `\u003cFunction\u003e`\n\n  Function of bar easing, you can use your custom function.\n\n  Default: `const easing = (t, b, c, d) =\u003e c * t / d + b`\n\n  **NOTE:** Every easing function should contains four arguments.\n  \u003e [check here](http://gizma.com/easing/) for more information of easing function\n\n#### options.zIndex\n\n  type: `\u003cNumber\u003e`\n\n  Config z-index of element if the bar is covered by your header or navbar.\n\n  Default: `999`\n\n#### options.startPoint\n\n  type: `\u003cNumber\u003e`\n\n  Where bar will go when involke start() function.\n\n  Default: `30`\n\n#### options.pausePoint\n\n  type: `\u003cNumber\u003e`\n\n  Where bar will stop waiting next event (ex: loadbar.done()),you can simply set value 100 to avoid pause behavior.\n\n  Default: `90`\n\n  **NOTE:** You can only call done() or start() function if the bar touches the pause poinst you have set\n\n#### options Example\n\n  ```javascript\n  ...\n  var easeInQuart = function (t, b, c, d) {\n    t /= d;\n    return c * t* t * t * t + b;\n  };\n\n  var loadbar = new Loadbar({\n    height: '10px', // which will be set to 4px automatically\n    backgroundColor: '#e4393c',\n    easeFunction: easeInQuart,\n    zIndex: 1000,\n    startPoint:50,\n    pausePoint: 60 // bar will stop at 60%\n  })\n  ...\n  ```\n\n### element\n\nYou can use your own HTML element which is not fixed at the top of screen.\n\ntype: `\u003cString\u003e` or `HTMLElement`\n\n#### element Example\n\n  ```javascript\n  var options = {\u003c!-- your custom options --\u003e}\n  var loadbar = new Loadbar(options, '.bar');\n  ```\n  or\n  ```javascript\n  var options = {\u003c!-- your custom options --\u003e}\n  var bar = document.getElementById('bar')\n  var loadbar = new Loadbar(options, bar);\n  ```\n\n---\n\nMIT License\n\nCopyright (c) [2017] [nichenqin]\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnichenqin%2Floadbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnichenqin%2Floadbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnichenqin%2Floadbar/lists"}