HTML CSS JavaScript 实现酷炫进度条动画 - 从 0% 到 100%

本文将使用 HTML、CSS 和 JavaScript 代码实现一个简单易懂、样式美观的进度条动画效果。点击按钮后，进度条会从 0% 逐渐填充到 100%。

HTML 代码：

<button id='btn'>点击按钮</button>
<div class='progress-container'>
  <div class='progress-bar'></div>
</div>

CSS 代码：

.progress-container {
  width: 100%;
  height: 20px;
  background-color: #ddd;
  border-radius: 10px;
  margin-top: 20px;
}

.progress-bar {
  height: 100%;
  background-color: #4caf50;
  width: 0%;
  border-radius: 10px;
  transition: width 0.5s ease-in-out;
}

JavaScript 代码：

const btn = document.getElementById('btn');
const progressBar = document.querySelector('.progress-bar');

btn.addEventListener('click', function() {
  let width = 0;
  const interval = setInterval(function() {
    if (width >= 100) {
      clearInterval(interval);
    } else {
      width++;
      progressBar.style.width = `${width}%`;
    }
  }, 10);
});

效果如下图所示：