javascript - 添加动画以填充进度条

Question

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

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>

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