CSS 我如何只用CSS制作这个进度条

在本文中，我们将介绍如何只用CSS制作一个简单的进度条。进度条是网页开发中常见的元素之一，用于显示某个任务的完成进度。通常情况下，进度条可以用JavaScript来实现，但是在某些情况下，我们可能希望只使用CSS来完成这个任务。

阅读更多：CSS 教程

实现基本的进度条样式

首先，我们需要创建一个HTML文件，并在其中添加一个div元素，用于表示进度条。在CSS中，我们可以使用伪元素(::after或::before)来创建一个表示进度的填充效果。

例如，下面是一个简单的HTML结构和对应的CSS样式，实现了一个基本的进度条效果：

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

      .progress-bar::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-color: #blue;
        border-radius: 10px;
        transition: width 0.5s ease;
      }

      .progress-bar[data-value="25"]::after {
        width: 25%;
      }

      .progress-bar[data-value="50"]::after {
        width: 50%;
      }

      .progress-bar[data-value="75"]::after {
        width: 75%;
      }
    </style>
  </head>
  <body>
    <div class="progress-bar" data-value="50"></div>
  </body>
</html>

在上面的例子中，我们创建了一个具有.progress-bar类名的div元素，并使用CSS样式设置了其宽高、背景颜色和边框样式。然后，我们使用伪元素.progress-bar::after来实现进度条的填充效果。在样式中，我们使用了data-value属性来表示进度的百分比，并使用对应的CSS选择器来设置进度条的宽度。

在JavaScript中动态更新进度条

在前面的例子中，我们通过给进度条元素添加不同的data-value属性来实现不同的进度效果。然而，在实际开发中，我们通常会使用JavaScript来动态地更新进度条的值。

以下是一个使用JavaScript来动态更新进度条的例子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .progress-bar {
        /* 同前面的例子 */
      }

      .progress-bar::after {
        /* 同前面的例子 */
      }
    </style>

    <script>
      window.onload = function() {
        var progressBar = document.querySelector('.progress-bar');
        var button = document.querySelector('button');
        var value = 0;

        button.addEventListener('click', function() {
          value += 25;
          if (value > 100) {
            value = 0;
          }
          progressBar.setAttribute('data-value', value);
        });
      }
    </script>
  </head>
  <body>
    <div class="progress-bar" data-value="0"></div>
    <button>更新进度条</button>
  </body>
</html>

在上面的例子中，我们首先获取了进度条元素和一个按钮元素，然后使用JavaScript的事件监听函数来监听按钮的点击事件。当按钮被点击时，我们将进度值增加25，并将其赋值给进度条的data-value属性。如果进度值超过100，我们将其重置为0。

这样，每次点击按钮时，进度条都会按照新的进度值进行更新。