之前在 Ruby-China 上遇到一些朋友在询问怎么实现网页进度条,我看了下没怎么深究,这次在做 GitHub 账户登录的过程中碰到一个问题:由于认证过程会发送几次 http 请求,点击登录按钮之后发现没有任何反应,过几秒之后才会进入登录状态,开始还以为是按钮不起作用,这样的体验是非常不好的,我们希望有个进度条能够显示当前请求的进度,幸运的是,Rails 自带了 gem 包可以帮助实现这个功能,那就是 turbolinks。
turbolinks 的主要作用是为了加速页面渲染,进度条功能只是它提供的功能之一。
如果 turbolinks 3 正式发布之后(目前还是开发版本),也许我这篇文章就没有什么作用了,因为版本 3 已经默认进度条功能是开启状态,如果用的是 turbolinks 3 之前的版本,你只需要做简单的配置,只需要一行代码:
#app/assets/javascripts/application.js
Turbolinks.enableProgressBar();
该行代码的意思是打开 Turbolinks 的进度条功能,当重新点击网站页面的时候,进度条就会出现,超 easy!
如果想定制进度条的外观,可以通过 CSS 来实现:
#app/assets/stylesheets/application.scss
html.turbolinks-progress-bar::before {
background-color: red !important;
height: 5px !important;
}
然后点击网站页面,进度条变成红色,并且宽度增加:
是不是很简单😄,建议多阅读官方的文档,可以了解到 turbolinks 的更多功能。