diff options
Diffstat (limited to 'node_modules/nprogress/Readme.md')
| -rw-r--r-- | node_modules/nprogress/Readme.md | 197 |
1 files changed, 0 insertions, 197 deletions
diff --git a/node_modules/nprogress/Readme.md b/node_modules/nprogress/Readme.md deleted file mode 100644 index 4097088c..00000000 --- a/node_modules/nprogress/Readme.md +++ /dev/null @@ -1,197 +0,0 @@ -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) |