如何使用Rails 4的Turbolinks创建Youtube样式加载栏？

有没有办法使用turbo-links制作Youtube样式加载栏（跨顶栏的页间）。

Turbolinks有很多不同的回调，所以你可以跨越几个步骤制作一个跳跃的但是有没有办法挂钩进展呢？

Answer 1

nprogress-rails可能就是你所需要的。

Answer 2

检查你的turbolinks版本：

$ gem list |grep turbolinks turbolinks (2.5.3) 

如果您的Turbolinks版本<3.0，请将以下代码添加到您的js文件中（例如： application.js ）。

 Turbolinks.enableProgressBar(); 

如果您使用的是Turbolinks 3.0，则默认情况下会打开进度条。

https://github.com/rails/turbolinks#progress-bar 。

进度条可以通过CSS自定义，如：

 html.turbolinks-progress-bar::before { background-color: red !important; height: 5px !important; } 

Answer 3

假设您已正确设置Turbolinks，请将nProgress JS脚本添加到您的Rails应用程序资产管道，即JS和CSS 。

通过将此添加到您的自定义JS来设置nProgress …

 $(document).on('page:fetch', function() { NProgress.start(); }); $(document).on('page:change', function() { NProgress.done(); }); $(document).on('page:restore', function() { NProgress.remove(); }); 

就是这样。

Ps：查看nProgress Github页面了解更多信息。

Answer 4

在https://github.com/rails/turbolinks/issues/265中提到

不会添加到Turbolinks，但会向您显示如何在需要时添加它的简单参考。

Answer 5

这是另一个来自Hubspot的精彩JS，叫做Pace。

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

Answer 6

如今，一个ProgressBar包含在turbolinks中（v.2.5.3）

Answer 7

一个名为NG Progress JS的jQuery插件似乎得到了对turbo链接的支持。 这是NG进展和替代方案。

http://www.webiyo.com/2013/09/youtube-style-ajax-progress-bar-using.html

希望能帮助到你。