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?

Answer 1

nprogress-rails is probably just what you need.

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