Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/evereq/nprogress.js.nuget
NProgress.js NuGet Package
https://github.com/evereq/nprogress.js.nuget
Last synced: about 1 month ago
JSON representation
NProgress.js NuGet Package
- Host: GitHub
- URL: https://github.com/evereq/nprogress.js.nuget
- Owner: evereq
- License: mit
- Created: 2013-08-25T11:32:05.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2014-10-26T10:19:41.000Z (about 10 years ago)
- Last Synced: 2023-03-23T01:55:43.206Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://ricostacruz.com/nprogress
- Size: 209 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### NuGet NProgress.js Package
### Some Links
- NuGet Package available at http://nuget.org/packages/NProgress.js
- NProgress.js site: http://ricostacruz.com/nprogress
- NProgress.js source at GitHub: https://github.com/rstacruz/nprogress
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
```
NProgress is available via [bower] and [npm].
$ bower install --save nprogress
$ npm install --save nprogress
[bower]: http://bower.io/search/?q=nprogress
[npm]: https://www.npmjs.org/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: "
..."
});
~~~
#### `ease` and `speed`
Adjust animation settings using *ease* (a CSS easing string)
and *speed* (in ms). (default: `ease` and `200`)
~~~ js
NProgress.configure({ ease: 'ease', speed: 500 });
~~~
#### `trickle`
Turn of 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 occurances 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.
[]( https://github.com/rstacruz/nprogress/issues )
__Questions__: ask them at StackOverflow with the tag *nprogress*.
[]( http://stackoverflow.com/questions/tagged/nprogress )
__Chat__: join us at gitter.im.
[]( 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].
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/jsfuse/contributors
[](http://travis-ci.org/rstacruz/nprogress)
[](https://npmjs.org/package/nprogress "View this project on npm")
[](https://bitdeli.com/free "Bitdeli Badge")