This is basically a ruby gem for asset pipeline which includes the version 0.2.0 of the awesome rstacruz' nprogress library.
Add this line to your application's Gemfile:
gem 'nprogress-rails'
And then execute:
$ bundle
Or install it yourself as:
$ gem install nprogress-rails
You basically have to add the requires to the application.js file:
//= require nprogress
//= require nprogress-turbolinksThe nprogress-turbolinks is required only if you use turbolinks. Using pjax
rather than turbolinks? Simply require nprogress-pjax instead. Want it also
for simple jQuery AJAX calls? Just require nprogress-ajax. Otherwise,
you will have to deal with show/hide the progress by your own.
Also, into your application.css.scss file:
*= require nprogress
*= require nprogress-bootstrap
*= require nprogress-turbolinks5The nprogress-bootstrap is required if you use bootstrap and have a fixed
toolbar or anything else. tl;dr: if the console shows no errors, but the
progress doesn't appear, try this.
The nprogress-turbolinks5 is required if you use turbolinks 5 and does not
want the default turbolinks progress to show up.
You can try the Angular.js support with something like this (again,
in application.js file):
//= require nprogress
//= require nprogress-angular
angular.module('myApp', [ 'nprogress-rails' ]);This should make all requests made with $http show/hide the NProgress bar.
You can use any of the configurations described in the readme
with this lib. I just recommend you to do so ASAP, for example, just after
the nprogress-rails require:
//= require nprogress
NProgress.configure({
showSpinner: false,
ease: 'ease',
speed: 500
});Since the v0.1.2.3 release, you can also change the color of the progressbar using SASS:
$nprogress-color: #f1f1f1;
$nprogress-height: 10px;
$nprogress-zindex: 10100;
@import 'nprogress';
@import 'nprogress-bootstrap';nprogress-ajax automatically triggers the NProgress bar when an Ajax
request is started (the 'ajaxStart' event), and finishes it when the Ajax
request completes (the 'ajaxStop' event). This works for any Ajax events
triggered using jQuery.
If you're using Prototype, you can include the nprogress-ajax-prototype
javascript file instead, which works for Ajax requests started from Prototype
(the 'onCreate' and 'onComplete' events, to be exact).
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent