CSS3 实现 网页顶部进度条

               

有朋友们问网页顶部进度条 如何应用，现在github 大部分国外网站 都在用，

这个效果可以使用现成的一些插件比如  这个，这个，还有这个。

比如youtobe： 

前些时候有注意到YouTube网站放出的新特性，那就是在视频页面间切换时，页面顶部会有一道华丽丽的红色激光脉冲掠过。

以下截图内容来自 刘家勇博客。

那不是其他什么为了炫技的东西，它是一个进度条，平时我们见了千百遍经常以转圈形式出现的进度条。当然谷歌对于进度展示的创新不止于此啦，比如用于谷歌加的下载gif也是很有新意的一个玩意儿。

但YouTube这个进度条似乎更具创新，让人觉得相当惊艳。

所以好奇的我按捺不住想要拔开它神秘面纱的心情。

大体来看用了以下技术：

1. Ajax：首先页面内容的加载使用的是Ajax异步请求，所以页头那个激光元素可以在内容请求与接收过程中得以展示，不然的话整个页面刷新那就无法实现了；
2. HTML5 History API: 其次我注意到页面地址也是跟着变的。前面提到整个页面是没有刷新的（一个不太靠谱的方法可以验证这点是显示网站favicon的地方没有出现