How to create a Youtube style loading bar with Rai

问题:

Is there a way to make a Youtube style loading bar (the inter-page across the top bar) with turbo-links.

Turbolinks has loads of different callbacks so you could make a jumpy one across a few steps but is there a way to hook into the progress too?

回答1:

nprogress-rails is probably just what you need.

回答2:

Check your turbolinks version:

$ gem list |grep turbolinks
turbolinks (2.5.3)

if your Turbolinks version < 3.0, add below code to you js file(for example: application.js).

Turbolinks.enableProgressBar();

if you are using Turbolinks 3.0, the progress bar is turned on by default.

https://github.com/rails/turbolinks#progress-bar.

the progress bar can be customized by CSS, just like:

html.turbolinks-progress-bar::before {
  background-color: red !important;
  height: 5px !important;
}

回答3:

Assuming you have Turbolinks set up correctly add nProgress JS script to your Rails app asset pipeline i.e the JS and CSS.

Set up nProgress by adding this to your custom JS ...

$(document).on('page:fetch',   function() { NProgress.start(); });
$(document).on('page:change',  function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });

And that's it.

Ps: Check out the nProgress Github page for more info.

回答4:

Was brought up in https://github.com/rails/turbolinks/issues/265

Won't be added to Turbolinks, but shows you a simple reference for how to add it if you need to.

回答5:

Here's another brilliant JS from Hubspot, called Pace.

http://github.hubspot.com/pace/docs/welcome/

回答6:

Nowadays a ProgressBar is included with turbolinks (v.2.5.3)

回答7:

A jQuery Plugin Called NG Progress JS seem to be having the support for turbo links. Here are the NG Progress & alternatives.

http://www.webiyo.com/2013/09/youtube-style-ajax-progress-bar-using.html

Hope It Helps.