查看我的codepen示例click to view

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.05s等于你的间隔。

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

进度条加载与div相同的速度

查看我的codepen示例click to view

1 个答案: