How to create a Youtube style loading bar with Rails 4's Turbolinks?
Check your turbolinks version:
$ gem list |grep turbolinksturbolinks (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;}
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.