How to create a Youtube style loading bar with Rails 4's Turbolinks?

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?

Clichy

Answer 1

nprogress-rails is probably just what you need.

Loughlin

This doesn't have anything to do with the turbolinks life cycle. – Clichy

We are using this ourselves now. @Smickie is incorrect, the gem has hooks to integrate and run the progress bar against several different techniques, specifically Turbolinks, Pjax & Ajax. – Dric

a very nice and easy to implement solution – Ennis

Can confirm - works perfectly alongside turbolinks, and has Bootstrap theming too - a very simple fix. – Sava

Answer 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;
}

Musing

Answer 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.

Monoculture

Answer 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.

Dric

Would this mean branching the turbolinks js or could you add it to the normal js file? – Clichy

Answer 5

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

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

Saxtuba

Answer 6

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

Hydrophyte

Answer 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.

Vicechancellor