How to create a Youtube style loading bar with Rai

Question

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?

Answer 1

nprogress-rails is probably just what you need.

Answer 2

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

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

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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