添加动画以填充进度条
问题描述:
如何更新它以填充动画进度条?添加动画以填充进度条
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>
+1
我错过了什么吗?我没有看到任何动画。 – j08691
+0
对不起!我没有添加JS来更新进度条的位置,因为我不知道你从哪里获取信息。如果您尝试使用JS制作动画,请告诉我,我将更新演示! –
答
如何使用JavaScript动画进度条的小的,基本的,演示:
var $progressBarOuter = $('.progress-bar-outer');
var $progressBar = $('.progress-bar-inner');
setTimeout(function() {
$progressBar.css('width', '10%');
setTimeout(function() {
$progressBar.css('width', '30%');
setTimeout(function() {
$progressBar.css('width', '100%');
setTimeout(function() {
$progressBarOuter.css('display', 'none');
console.log('LOADING COMPLETE');
}, 500); // WAIT 5 milliseconds
}, 2000); // WAIT 2 seconds
}, 1000); // WAIT 1 seconds
}, 1000); // WAIT 1 second
.progress-bar-outer {
width: 300px;
height: 40px;
flex: auto;
display: flex;
flex-direction: row;
border-radius: 0.5em;
overflow: hidden;
background-color: red;
}
.progress-bar-inner {
height: 100%;
background-color: green;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
</div>
答
给这家伙一枪!
将此内容添加到您的头文件标签中。
<script src="jquery-3.2.1.min.js"></script>
然后添加一些js。
$(document).ready(function(){
$(".progress-bar-inner").animate({
width:"100%"
}, 5000);
$(".progress-bar-inner2").animate({
width:0
}, 5000);
});
我也修改了一下css。
.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: 10%;
height: 100%;
background-color: red;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 90%;
height: 100%;
background-color: green;
}
看看这个[问题](https://*.com/questions/29416077/css3-keyframe-progress-bar) –
如果你正在寻找一个JavaScript解决方案,请上传你已经尝试了什么那没用。 – j08691