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?

score 29 · Accepted Answer · answered Sep 15 '13 at 17:18

29

nprogress-rails is probably just what you need.

answered Sep 15 '13 at 17:18

Sunil

3,424
2
24
25

This doesn't have anything to do with the turbolinks life cycle. – CafeHey Sep 18 '13 at 13:45
4

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. – Brad Murray Nov 04 '13 at 00:07
a very nice and easy to implement solution – cwd May 28 '14 at 15:01
1

Can confirm - works perfectly alongside turbolinks, and has Bootstrap theming too - a very simple fix. – jontly Jun 21 '14 at 02:13

pangpang · Answer 2 · 2016-05-05T04:14:48.440

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

score 3 · Answer 3 · answered Dec 16 '13 at 16:06

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.

score 1 · Answer 4 · answered Aug 19 '13 at 21:57

1

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.

answered Aug 19 '13 at 21:57

Brad Murray

419
4
9

Would this mean branching the turbolinks js or could you add it to the normal js file? – CafeHey Aug 20 '13 at 07:43

score 1 · Answer 5 · answered Jan 11 '15 at 06:16

1

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

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

answered Jan 11 '15 at 06:16

Karthik Kamalakannan

770
1
11
31

score 1 · Answer 6 · answered Aug 26 '15 at 13:06

1

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

answered Aug 26 '15 at 13:06

Yo Ludke

2,149
2
23
38

score 0 · Answer 7 · answered Sep 02 '13 at 05:58

0

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.

answered Sep 02 '13 at 05:58

Rakesh Waghela

2,227
2
26
46

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

7 Answers7

Linked