[请教] 有谁知道 https://selfstore.io 中随便点一个链接后、窗口顶部会有一个红色进度条出现、然后再跳转页面的效果是如何实现的？

moliliang

2015-04-20 16:21:31 +08:00

turbolinks

no13bus

2015-04-20 16:22:20 +08:00

https://github.com/rails/turbolinks/ progressbar

https://github.com/ruby-china/ruby-china/blob/60eafde55286c69fee90520ae0834765bc586170/app/assets/javascripts/turbolinks.js

https://github.com/ruby-china/ruby-china/blob/2c46e59e69a82f24a64f41430b2e88160d330d7d/app/views/search/index.html.erb

no13bus

2015-04-20 16:23:22 +08:00

https://github.com/lepture/flask-turbolinks

thcode

2015-04-20 16:24:28 +08:00

http://instantclick.io/
你可以参考一下这个代码中的 progress bar

chloerei

2015-04-20 16:25:09 +08:00

现在用的是 Turbolinks 自带的进度条，Turbolinks 是 Rails 框架默认的组件。

非 Turbolinks 应用可以看这个 https://github.com/rstacruz/nprogress/ ，要注意只有在 AJAX 更新的时候才有作用。

faceair

2015-04-20 16:25:33 +08:00

nprogress

hustlzp

2015-04-20 16:26:51 +08:00

@moliliang
@no13bus
@thcode
@chloerei
@faceair

谢谢各位，涨姿势了！

cj941030

2015-04-20 16:33:30 +08:00

http://www.cnblogs.com/Wayou/p/youtube_red_laser_bar.html

icyflash

2015-04-20 16:35:14 +08:00

nprogress + pjax

oott123

2015-04-20 17:00:50 +08:00

其实你可以考虑一下 InstantClick ……

daben1990

2015-04-20 17:47:48 +08:00

效果真的不错，打算下次页面用下

r00tt

2015-04-20 19:30:56 +08:00

有个gem nprogress.

jingwentian

2015-04-20 19:34:35 +08:00

https://github.com/JingwenTian/awesome-frontend#136-%E8%BF%9B%E5%BA%A6%E6%9D%A1%E5%8A%A0%E8%BD%BD%E5%8A%A8%E7%94%BBloading

lincanbin

2015-04-20 20:52:12 +08:00

pjax加个进度条。
实际上就是Ajax并在回调后修改地址栏和历史记录。
理解了这一点，做进度条就非常容易了。

ChiangDi

2015-04-20 20:54:04 +08:00

但是我感觉这个进度条是纯骗人的，连不上的时候它也会慢慢的前进。

0x142857

2015-04-20 21:10:35 +08:00

pace
pace
pace

virusdefender

2015-04-20 21:35:22 +08:00

amazeui就有这个工具 http://amazeui.org/javascript/nprogress

hustlzp

2015-04-20 22:13:48 +08:00

@ChiangDi 恩，是的...

hustlzp

2015-04-20 22:15:25 +08:00

@virusdefender wow, cool!

gkiwi

2015-04-20 22:19:22 +08:00

@ChiangDi 主要是用户心理/体验上的一些原因.毕竟,ajax或者点开网页后没有任何动态变化,人就容易焦虑..