Question

如何更新它以用动画填充进度条？

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

Answer 1

这就是我要做的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

Answer 2

关于如何使用JavaScript为进度条设置动画的小型基本演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

给这个家伙一个机会！

将此添加到您的头标记。

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

添加动画以填充进度条

3 个答案: