提问人：CafeHey 提问时间：8/20/2013 更新时间：5/5/2016 访问量：9194
如何使用 Rails 4 的 Turbolinks 创建一个 Youtube 风格的加载栏？
How to create a Youtube style loading bar with Rails 4's Turbolinks?
问：
有没有办法制作带有涡轮链接的 Youtube 样式加载栏（顶部栏的页面间）。
Turbolinks 有大量不同的回调，因此您可以在几个步骤中进行跳跃式回调，但有没有办法也与进度挂钩？
答：
1赞
Brad Murray
8/20/2013
#1
在 https://github.com/rails/turbolinks/issues/265 长大
不会添加到 Turbolinks，但会显示一个简单的参考，说明如何在需要时添加它。
评论
0赞
CafeHey
8/20/2013
这是否意味着分支 turbolinks js，或者您可以将其添加到普通的 js 文件中吗？
0赞
Rakesh Waghela
9/2/2013
#2
一个名为 NG Progress JS 的 jQuery 插件似乎支持 turbo links。 以下是NG的进展和替代方案。
http://www.webiyo.com/2013/09/youtube-style-ajax-progress-bar-using.html
希望对您有所帮助。
29赞
Sunil
9/16/2013
#3
nprogress-rails 可能正是您所需要的。
评论
0赞
CafeHey
9/18/2013
这与涡轮链接生命周期没有任何关系。
4赞
Brad Murray
11/4/2013
我们现在正在使用它。@Smickie不正确，但 gem 具有针对几种不同技术集成和运行进度条的钩子，特别是 Turbolinks、Pjax 和 Ajax。
0赞
cwd
5/28/2014
一个非常好且易于实施的解决方案
1赞
jontly
6/21/2014
可以确认 - 与 turbolinks 完美配合，并且还具有 Bootstrap 主题 - 一个非常简单的修复。
3赞
King'ori Maina
12/17/2013
#4
假设您正确设置了 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 页面了解更多信息。
1赞
Karthik Kamalakannan
1/11/2015
#5
这是 Hubspot 的另一个出色的 JS，称为 Pace。
http://github.hubspot.com/pace/docs/welcome/
1赞
Yo Ludke
8/26/2015
#6
如今，ProgressBar 包含在 turbolinks 中 （v.2.5.3）
16赞
pangpang
9/2/2015
#7
检查您的 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;
}
评论