添加动画以填充进度条

.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>

来源

2017-07-14 User7354632781

看看这个[问题]（https://stackoverflow.com/questions/29416077/css3-keyframe-progress-bar） –

如果你正在寻找一个JavaScript解决方案，请上传你已经尝试了什么那没用。 – j08691

这是我会怎么做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>

见https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role

来源

2017-07-14 20:37:58

我错过了什么吗？我没有看到任何动画。 – j08691

对不起！我没有添加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>

来源

2017-07-14 20:47:44

给这家伙一枪！

将此内容添加到您的头文件标签中。

<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; 
}

来源

2017-07-14 20:49:40 ThomasK

添加动画以填充进度条

回答

相关问题