我如何更新它以用动画填充进度条?
https://jsfiddle.net/dfkLexuv/2/
.progress-bar-outer {
width: 300px;
height: 40px;
flex: auto;
display: flex;
flex-direction: row;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 75%;
height: 100%;
background-color: red;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 50%;
height: 100%;
background-color: green;
}
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
最佳答案
这就是我的做法https://jsfiddle.net/f1ajv0Lv/5/
然后您需要添加 JS 以随着进度的变化更新 scaleX
样式:
$progressBar.css('transform', 'scaleX(' + percentageCompleteFromZeroToOne + ')');
请注意,我添加了一些额外的属性以提高可访问性:
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>
关于javascript - 添加动画以填充进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45111005/