CSS 如何仅用CSS创建这个进度条

在本文中，我们将介绍如何使用CSS创建一个简单的进度条。

阅读更多：CSS 教程

创建HTML结构

首先，我们需要创建一个HTML结构来容纳进度条。我们可以使用一个<div>元素来表示进度条的容器，并在其中添加一个子元素来表示进度条的进度。

<div class="progress">
  <div class="progress-bar"></div>
</div>

CSS样式

接下来，我们将使用CSS来样式化这个进度条。

.progress {
  width: 300px;
  height: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #3498db;
  width: 0%;
  border-radius: 10px;
  transition: width 0.3s ease;
}

在上面的代码中，我们首先定义了.progress类的样式。我们设置了进度条的宽度和高度，并给它一个背景颜色和边框半径。我们还使用了overflow: hidden来确保进度条的进度不会溢出。

然后，我们定义了.progress-bar类的样式。我们将高度设置为100%以填充整个进度条，将背景颜色设置为蓝色，并将初始宽度设置为0%。我们还添加了一个过渡效果，以使进度条的变化更加平滑。

使用CSS动画设置进度条进度

现在，让我们通过使用CSS动画来改变进度条的进度。

.progress-bar {
  /* ... */
}

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

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

.progress-bar[data-progress="75"] {
  width: 75%;
}

.progress-bar[data-progress="100"] {
  width: 100%;
}

在上面的代码中，我们使用了data-progress属性来控制进度条的进度。我们分别为不同的进度值创建了不同的选择器，并根据选择器设置了不同的宽度值。

现在，当我们对进度条的元素添加data-progress属性并设置不同的值时，进度条将相应地显示相应的进度。

<div class="progress">
  <div class="progress-bar" data-progress="25"></div>
</div>

<div class="progress">
  <div class="progress-bar" data-progress="50"></div>
</div>

<div class="progress">
  <div class="progress-bar" data-progress="75"></div>
</div>

<div class="progress">
  <div class="progress-bar" data-progress="100"></div>
</div>