CSS 进度条

什么是 CSS 进度条

CSS 进度条是一种可以用来表示任务、操作或加载过程的图形化元素，通过改变进度条的宽度、颜色或动画效果，可以让用户清晰地了解任务的进展情况。

在 Web 开发中，CSS 进度条可以方便地实现对加载或处理过程的可视化展示，提高用户体验。

CSS 进度条的实现方式

使用 `width` 属性

最简单的一种方式是使用 CSS 的 width 属性来动态改变进度条的宽度。

假设我们想要创建一个水平的进度条，可以通过以下代码来实现：

<!DOCTYPE html>
<html>
<head>
  <style>
    .progress-bar {
      width: 500px;  /* 进度条的总宽度 */
      height: 20px;  /* 进度条的高度 */
      background-color: #f2f2f2;  /* 进度条的背景色 */
    }

    .progress {
      height: 100%;
      background-color: #4caf50;  /* 进度条的前景色 */
    }
  </style>
</head>
<body>
  <div class="progress-bar">
    <div class="progress" style="width: 50%;"></div>
  </div>
</body>
</html>

运行上述代码，即可在浏览器中看到一个宽度为 50% 的绿色进度条。

使用 `transform` 属性

除了改变宽度外，CSS 的 transform 属性也可以用来实现进度条的动画效果。

<!DOCTYPE html>
<html>
<head>
  <style>
    .progress-bar {
      width: 500px;
      height: 20px;
      background-color: #f2f2f2;
    }

    .progress {
      height: 100%;
      background-color: #4caf50;
      transform: scaleX(0);  /* 默认宽度为 0 */
      transform-origin: top left;  /* 从左上角开始变化 */
      animation: progress-animation 2s linear forwards;  /* 2s 线性动画 */
    }

    @keyframes progress-animation {
      to {
        transform: scaleX(1);  /* 动画结束时宽度为 100% */
      }
    }
  </style>
</head>
<body>
  <div class="progress-bar">
    <div class="progress"></div>
  </div>
</body>
</html>

上述代码中，我们使用了 CSS 动画 progress-animation，将进度条的宽度从 0 逐渐增加到 100%，并添加了一些动画效果。

使用伪元素

在某些情况下，我们可能还需要在进度条上显示一些额外的信息，例如进度百分比或任务名称。这时可以使用 CSS 伪元素来实现。

<!DOCTYPE html>
<html>
<head>
  <style>
    .progress-bar {
      width: 500px;
      height: 20px;
      background-color: #f2f2f2;
      position: relative;
    }

    .progress {
      height: 100%;
      background-color: #4caf50;
      width: 0;
      position: absolute;
      transition: width 0.3s ease;  /* 添加宽度变化的过渡效果 */
    }

    .progress-bar::after {
      content: attr(data-progress);  /* 显示进度百分比 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
    }

    /* 进度条到达 100% 后隐藏进度百分比 */
    .progress-bar[data-completed="true"]::after {
      display: none;
    }
  </style>
</head>
<body>
  <div class="progress-bar" data-progress="0%" data-completed="false">
    <div class="progress"></div>
  </div>
</body>
</html>

在上述代码中，我们使用 ::after 伪元素来添加进度百分比的显示，并添加了一些属性来控制进度条的状态。