{"id":13394847,"url":"https://github.com/rstacruz/nprogress","last_synced_at":"2025-05-13T11:08:04.118Z","repository":{"id":10163122,"uuid":"12244426","full_name":"rstacruz/nprogress","owner":"rstacruz","description":"For slim progress bars like on YouTube, Medium, etc","archived":false,"fork":false,"pushed_at":"2022-06-04T00:38:39.000Z","size":722,"stargazers_count":26304,"open_issues_count":135,"forks_count":1807,"subscribers_count":407,"default_branch":"master","last_synced_at":"2025-05-13T11:07:55.406Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://ricostacruz.com/nprogress","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/rstacruz.png","metadata":{"files":{"readme":"Readme.md","changelog":"History.md","contributing":null,"funding":null,"license":"License.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-08-20T13:58:02.000Z","updated_at":"2025-05-13T06:12:18.000Z","dependencies_parsed_at":"2022-07-12T15:04:05.424Z","dependency_job_id":null,"html_url":"https://github.com/rstacruz/nprogress","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/rstacruz%2Fnprogress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstacruz%2Fnprogress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstacruz%2Fnprogress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstacruz%2Fnprogress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rstacruz","download_url":"https://codeload.github.com/rstacruz/nprogress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253929366,"owners_count":21985802,"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-07-30T17:01:33.771Z","updated_at":"2025-05-13T11:08:04.080Z","avatar_url":"https://github.com/rstacruz.png","language":"JavaScript","readme":"NProgress\n=========\n\n[![Status](https://api.travis-ci.org/rstacruz/nprogress.svg?branch=master)](http://travis-ci.org/rstacruz/nprogress) \n[![npm version](https://img.shields.io/npm/v/nprogress.png)](https://npmjs.org/package/nprogress \"View this project on npm\")\n[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/nprogress/badge?style=rounded)](https://www.jsdelivr.com/package/npm/nprogress)\n\n\u003e Minimalist progress bar\n\nSlim progress bars for Ajax'y applications. Inspired by Google, YouTube, and\nMedium.\n\nInstallation\n------------\n\nAdd [nprogress.js] and [nprogress.css] to your project.\n\n```html\n\u003cscript src='nprogress.js'\u003e\u003c/script\u003e\n\u003clink rel='stylesheet' href='nprogress.css'/\u003e\n```\n\nNProgress is available via [bower] and [npm].\n\n    $ npm install --save nprogress\n\nAlso available via [unpkg] CDN:\n\n- https://unpkg.com/nprogress@0.2.0/nprogress.js\n- https://unpkg.com/nprogress@0.2.0/nprogress.css\n\n[bower]: http://bower.io/search/?q=nprogress\n[npm]: https://www.npmjs.org/package/nprogress\n[unpkg]: https://unpkg.com/\n\nBasic usage\n-----------\n\nSimply call `start()` and `done()` to control the progress bar.\n\n~~~ js\nNProgress.start();\nNProgress.done();\n~~~\n\n### Turbolinks (version 5+)\nEnsure you're using Turbolinks 5+, and use \nthis: (explained [here](https://github.com/rstacruz/nprogress/issues/8#issuecomment-239107109))\n\n~~~ js\n$(document).on('turbolinks:click', function() {\n  NProgress.start();\n});\n$(document).on('turbolinks:render', function() {\n  NProgress.done();\n  NProgress.remove();\n});\n~~~\n\n### Turbolinks (version 3 and below)\nEnsure you're using Turbolinks 1.3.0+, and use \nthis: (explained [here](https://github.com/rstacruz/nprogress/issues/8#issuecomment-23010560))\n\n~~~ js\n$(document).on('page:fetch',   function() { NProgress.start(); });\n$(document).on('page:change',  function() { NProgress.done(); });\n$(document).on('page:restore', function() { NProgress.remove(); });\n~~~\n\n### Pjax\nTry this: (explained [here](https://github.com/rstacruz/nprogress/issues/22#issuecomment-36540472))\n\n~~~ js\n$(document).on('pjax:start', function() { NProgress.start(); });\n$(document).on('pjax:end',   function() { NProgress.done();  });\n~~~\n\nIdeas\n-----\n\n * Add progress to your Ajax calls! Bind it to the jQuery `ajaxStart` and\n `ajaxStop` events.\n\n * Make a fancy loading bar even without Turbolinks/Pjax! Bind it to\n `$(document).ready` and `$(window).load`.\n\nAdvanced usage\n--------------\n\n__Percentages:__ To set a progress percentage, call `.set(n)`, where *n* is a\nnumber between `0..1`.\n\n~~~ js\nNProgress.set(0.0);     // Sorta same as .start()\nNProgress.set(0.4);\nNProgress.set(1.0);     // Sorta same as .done()\n~~~\n\n__Incrementing:__ To increment the progress bar, just use `.inc()`. This\nincrements it with a random amount. This will never get to 100%: use it for\nevery image load (or similar).\n\n~~~ js\nNProgress.inc();\n~~~\n\nIf you want to increment by a specific value, you can pass that as a parameter:\n\n~~~ js\nNProgress.inc(0.2);    // This will get the current status value and adds 0.2 until status is 0.994\n~~~\n\n__Force-done:__ By passing `true` to `done()`, it will show the progress bar\neven if it's not being shown. (The default behavior is that *.done()* will not\n    do anything if *.start()* isn't called)\n\n~~~ js\nNProgress.done(true);\n~~~\n\n__Get the status value:__ To get the status value, use `.status`\n\nConfiguration\n-------------\n\n#### `minimum`\nChanges the minimum percentage used upon starting. (default: `0.08`)\n\n~~~ js\nNProgress.configure({ minimum: 0.1 });\n~~~\n\n#### `template`\nYou can change the markup using `template`. To keep the progress\nbar working, keep an element with `role='bar'` in there. See the [default template]\nfor reference.\n\n~~~ js\nNProgress.configure({\n  template: \"\u003cdiv class='....'\u003e...\u003c/div\u003e\"\n});\n~~~\n\n#### `easing` and `speed`\nAdjust animation settings using *easing* (a CSS easing string)\nand *speed* (in ms). (default: `ease` and `200`)\n\n~~~ js\nNProgress.configure({ easing: 'ease', speed: 500 });\n~~~\n\n#### `trickle`\nTurn off the automatic incrementing behavior by setting this to `false`. (default: `true`)\n\n~~~ js\nNProgress.configure({ trickle: false });\n~~~\n\n#### `trickleSpeed`\nAdjust how often to trickle/increment, in ms.\n\n~~~ js\nNProgress.configure({ trickleSpeed: 200 });\n~~~\n\n#### `showSpinner`\nTurn off loading spinner by setting it to false. (default: `true`)\n\n~~~ js\nNProgress.configure({ showSpinner: false });\n~~~\n\n#### `parent`\nspecify this to change the parent container. (default: `body`)\n\n~~~ js\nNProgress.configure({ parent: '#container' });\n~~~\n\nCustomization\n-------------\n\nJust edit `nprogress.css` to your liking. Tip: you probably only want to find\nand replace occurrences of `#29d`.\n\nThe included CSS file is pretty minimal... in fact, feel free to scrap it and\nmake your own!\n\nResources\n---------\n\n * [New UI Pattern: Website Loading Bars](http://www.usabilitypost.com/2013/08/19/new-ui-pattern-website-loading-bars/) (usabilitypost.com)\n\nSupport\n-------\n\n__Bugs and requests__: submit them through the project's issues tracker.\u003cbr\u003e\n[![Issues](http://img.shields.io/github/issues/rstacruz/nprogress.svg)]( https://github.com/rstacruz/nprogress/issues )\n\n__Questions__: ask them at StackOverflow with the tag *nprogress*.\u003cbr\u003e\n[![StackOverflow](http://img.shields.io/badge/stackoverflow-nprogress-brightgreen.svg)]( http://stackoverflow.com/questions/tagged/nprogress )\n\n__Chat__: join us at gitter.im.\u003cbr\u003e\n[![Chat](http://img.shields.io/badge/gitter-rstacruz/nprogress-brightgreen.svg)]( https://gitter.im/rstacruz/nprogress )\n\n[default template]: https://github.com/rstacruz/nprogress/blob/master/nprogress.js#L31\n[Turbolinks]: https://github.com/rails/turbolinks\n[nprogress.js]: http://ricostacruz.com/nprogress/nprogress.js\n[nprogress.css]: http://ricostacruz.com/nprogress/nprogress.css\n\nThanks\n------\n\n**NProgress** © 2013-2017, Rico Sta. Cruz. Released under the [MIT License].\u003cbr\u003e\nAuthored and maintained by Rico Sta. Cruz with help from [contributors].\n\n\u003e [ricostacruz.com](http://ricostacruz.com) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e GitHub [@rstacruz](https://github.com/rstacruz) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e Twitter [@rstacruz](https://twitter.com/rstacruz)\n\n[MIT License]: http://mit-license.org/\n[contributors]: http://github.com/rstacruz/nprogress/contributors\n\n[![](https://img.shields.io/github/followers/rstacruz.svg?style=social\u0026label=@rstacruz)](https://github.com/rstacruz) \u0026nbsp;\n[![](https://img.shields.io/twitter/follow/rstacruz.svg?style=social\u0026label=@rstacruz)](https://twitter.com/rstacruz)\n","funding_links":[],"categories":["JavaScript","Uncategorized","Top Progress Bar","others","目录","UI Components","插件"],"sub_categories":["Uncategorized","Progress/ Spinners/ Loaders","PC端"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstacruz%2Fnprogress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frstacruz%2Fnprogress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstacruz%2Fnprogress/lists"}