javascript - youtube進度條？

Question

https://www.youtube.com/

隨便點一個影片後
上面會有一條紅色的進度條效果。(感覺是真的讀取進度條，不是假象)
請問這該怎麼做？一模一樣

Answer 1

很久之前做过这个loading-bar的组件

点击看代码和预览效果啊，转瞬即逝的效果哦。
https://jsfiddle.net/6gpjjv40/

Answer 2

https://www.zhihu.com/questio...

Answer 3

谢邀。我没有看过YouTube的。我提供一个不靠谱的进度条，经过我的观察，进度条的百分之八十是一个固定速度走的，如果网速卡，会开在百分之八十的位置。

那么好了，我们有一个p，left：0;position:fixed;top:0;width:0;height:2px;background-color:#f00;
然后我们js里面有个动画。这个动画width:80%到。jquery的animate可以实现。
当我们都加在完。load的是的。上面那个p取消一开始的动画.stop()。增加一个新的动画,把width变成100%;时间短一点。

Answer 4

不要想得太复杂,其实就是动画,AJAX请求完成就隐藏掉进度条.

//进度条默认隐藏,点击AJAX加载链接时通过动画显示进度条,AJAX完成后隐藏进度条
$('.bar').show().css('width', 0).animate({width: '100%'}, 1000, 'linear', function(){
    var context = this;
    setTimeout(function(){$(context).hide();}, 200); //实际中,AJAX加载完成再设置隐藏
});