🔧
This commit is contained in:
197
node_modules/nprogress/Readme.md
generated
vendored
Normal file
197
node_modules/nprogress/Readme.md
generated
vendored
Normal file
@@ -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)
|
||||
Reference in New Issue
Block a user