javascript - 进度条加载速度与 div 相同

Question

在我的进度条上，我试图让它检测 div 加载速度。

如果 div 加载速度很快，我想要实现的目标将很快达到 100%。但进度条的加载速度应该与 div 的加载速度一样快。

问题:如何让我的进度条加载 div 的加载速度。

查看我的 codepen 示例 click to view

Java 脚本

setTimeout(function(){

$('.progress .progress-bar').each(function() {

var me = $(this);
var perc = me.attr("data-percentage");

var current_perc = 0;

var progress = setInterval(function() {
if (current_perc>=perc) {
    clearInterval(progress);
} else {
    current_perc +=1;
    me.css('width', (current_perc) + '%');
}

me.text('Page Loading ' + (current_perc) + ' %');

}, 50);

});

},300);

HTML

<div class="container big-space">
    <div class="progress progress-striped active">
        <div class="progress-bar" style="width: 0%;" data-percentage="100"></div>
    </div>
</div>

<div class="container big-space">
<div class="well">
<h4>Sample Div</h4>
</div>
</div>

Answer 1

只需从 CSS 中删除过渡和动画类:

.progress-bar.active, .progress.active .progress-bar {
    -webkit-animation: none;
    animation: none;
}
.progress-bar {
    -webkit-transition : none;
    transition : none;
}

您还可以这样做以使动画更加流畅:

.progress-bar {
    transition: width .05s ease;
}

无论如何请注意，0.05 秒等于您的间隔。

在此处查看您改编的示例:codepen example