diff options
| author | ruki <waruqi@gmail.com> | 2018-11-08 00:38:48 +0800 |
|---|---|---|
| committer | ruki <waruqi@gmail.com> | 2018-11-07 21:53:09 +0800 |
| commit | 26105034da4fcce7ac883c899d781f016559310d (patch) | |
| tree | c459a5dc4e3aa0972d9919033ece511ce76dd129 /node_modules/nprogress/Readme.md | |
| parent | 2c77f00f1a7ecb6c8192f9c16d3b2001b254a107 (diff) | |
| download | xmake-docs-26105034da4fcce7ac883c899d781f016559310d.tar.gz xmake-docs-26105034da4fcce7ac883c899d781f016559310d.zip | |
switch to vuepress
Diffstat (limited to 'node_modules/nprogress/Readme.md')
| -rw-r--r-- | node_modules/nprogress/Readme.md | 197 |
1 files changed, 197 insertions, 0 deletions
diff --git a/node_modules/nprogress/Readme.md b/node_modules/nprogress/Readme.md new file mode 100644 index 00000000..4097088c --- /dev/null +++ b/node_modules/nprogress/Readme.md @@ -0,0 +1,197 @@ +NProgress +========= + +Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and +Medium. + + +Installation +------------ + +Add [nprogress.js] and [nprogress.css] to your project. + +```html +<script src='nprogress.js'></script> +<link rel='stylesheet' href='nprogress.css'/> +``` + +NProgress is available via [bower] and [npm] and [spm]. + + $ bower install --save nprogress + $ npm install --save nprogress + +[bower]: http://bower.io/search/?q=nprogress +[npm]: https://www.npmjs.org/package/nprogress +[spm]: http://spmjs.io/package/nprogress + +Basic usage +----------- + +Simply call `start()` and `done()` to control the progress bar. + +~~~ js +NProgress.start(); +NProgress.done(); +~~~ + +Using [Turbolinks] or similar? Ensure you're using Turbolinks 1.3.0+, and use +this: (explained + [here](https://github.com/rstacruz/nprogress/issues/8#issuecomment-23010560)) + +~~~ js +$(document).on('page:fetch', function() { NProgress.start(); }); +$(document).on('page:change', function() { NProgress.done(); }); +$(document).on('page:restore', function() { NProgress.remove(); }); +~~~ + +Ideas +----- + + * Add progress to your Ajax calls! Bind it to the jQuery `ajaxStart` and + `ajaxStop` events. + + * Make a fancy loading bar even without Turbolinks/Pjax! Bind it to + `$(document).ready` and `$(window).load`. + +Advanced usage +-------------- + +__Percentages:__ To set a progress percentage, call `.set(n)`, where *n* is a +number between `0..1`. + +~~~ js +NProgress.set(0.0); // Sorta same as .start() +NProgress.set(0.4); +NProgress.set(1.0); // Sorta same as .done() +~~~ + +__Incrementing:__ To increment the progress bar, just use `.inc()`. This +increments it with a random amount. This will never get to 100%: use it for +every image load (or similar). + +~~~ js +NProgress.inc(); +~~~ + +If you want to increment by a specific value, you can pass that as a parameter: + +~~~ js +NProgress.inc(0.2); // This will get the current status value and adds 0.2 until status is 0.994 +~~~ + +__Force-done:__ By passing `true` to `done()`, it will show the progress bar +even if it's not being shown. (The default behavior is that *.done()* will not + do anything if *.start()* isn't called) + +~~~ js +NProgress.done(true); +~~~ + +__Get the status value:__ To get the status value, use `.status` + +Configuration +------------- + +#### `minimum` +Changes the minimum percentage used upon starting. (default: `0.08`) + +~~~ js +NProgress.configure({ minimum: 0.1 }); +~~~ + +#### `template` +You can change the markup using `template`. To keep the progress +bar working, keep an element with `role='bar'` in there. See the [default template] +for reference. + +~~~ js +NProgress.configure({ + template: "<div class='....'>...</div>" +}); +~~~ + +#### `easing` and `speed` +Adjust animation settings using *easing* (a CSS easing string) +and *speed* (in ms). (default: `ease` and `200`) + +~~~ js +NProgress.configure({ easing: 'ease', speed: 500 }); +~~~ + +#### `trickle` +Turn off the automatic incrementing behavior by setting this to `false`. (default: `true`) + +~~~ js +NProgress.configure({ trickle: false }); +~~~ + +#### `trickleRate` and `trickleSpeed` +You can adjust the *trickleRate* (how much to increase per trickle) and +*trickleSpeed* (how often to trickle, in ms). + +~~~ js +NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 }); +~~~ + +#### `showSpinner` +Turn off loading spinner by setting it to false. (default: `true`) + +~~~ js +NProgress.configure({ showSpinner: false }); +~~~ + +#### `parent` +specify this to change the parent container. (default: `body`) + +~~~ js +NProgress.configure({ parent: '#container' }); +~~~ + +Customization +------------- + +Just edit `nprogress.css` to your liking. Tip: you probably only want to find +and replace occurrences of `#29d`. + +The included CSS file is pretty minimal... in fact, feel free to scrap it and +make your own! + +Resources +--------- + + * [New UI Pattern: Website Loading Bars](http://www.usabilitypost.com/2013/08/19/new-ui-pattern-website-loading-bars/) (usabilitypost.com) + +Support +------- + +__Bugs and requests__: submit them through the project's issues tracker.<br> +[]( https://github.com/rstacruz/nprogress/issues ) + +__Questions__: ask them at StackOverflow with the tag *nprogress*.<br> +[]( http://stackoverflow.com/questions/tagged/nprogress ) + +__Chat__: join us at gitter.im.<br> +[]( https://gitter.im/rstacruz/nprogress ) + +[default template]: +https://github.com/rstacruz/nprogress/blob/master/nprogress.js#L31 +[Turbolinks]: https://github.com/rails/turbolinks +[nprogress.js]: http://ricostacruz.com/nprogress/nprogress.js +[nprogress.css]: http://ricostacruz.com/nprogress/nprogress.css + +Thanks +------ + +**NProgress** © 2013-2014, Rico Sta. Cruz. Released under the [MIT License].<br> +Authored and maintained by Rico Sta. Cruz with help from [contributors]. + +> [ricostacruz.com](http://ricostacruz.com) · +> GitHub [@rstacruz](https://github.com/rstacruz) · +> Twitter [@rstacruz](https://twitter.com/rstacruz) + +[MIT License]: http://mit-license.org/ +[contributors]: http://github.com/rstacruz/nprogress/contributors + +[](http://travis-ci.org/rstacruz/nprogress) +[](https://npmjs.org/package/nprogress "View this project on npm") +[](http://spmjs.io/package/nprogress) |
