带百分比的引导进度条 - HTML

HTML中有多种实现进度条的方式，其中一种是通过CSS来实现带百分比的引导进度条。下面我们将介绍如何利用HTML和CSS创建一个简单的带百分比的引导进度条。

实现

HTML

我们需要创建一个HTML元素来包含我们的进度条。

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

CSS

然后我们需要使用CSS来设置进度条的外观和动画效果。

.progress-bar {
  width: 100%;
  height: 30px;
  background-color: #f2f2f2;
  position: relative;
}

.progress-bar:before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #4caf50;
  animation: progress 5s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes progress {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

在上面的CSS中，我们设置了进度条的宽度和高度，并为其设置了背景色。我们还创建了一个伪元素，用于表示进度条的进度。我们设置了它的初始宽度为0，并在动画中将其逐渐变为100％。我们可以根据需要调整动画的持续时间和缓动效果。

展示

现在我们已经创建了一个简单的带百分比的引导进度条，可以在网页中使用。

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

.progress-bar {
  width: 100%;
  height: 30px;
  background-color: #f2f2f2;
  position: relative;
}

.progress-bar:before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #4caf50;
  animation: progress 5s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes progress {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

这是我们最终的效果：

总结

通过使用HTML和CSS，我们可以轻松地创建一个带百分比的引导进度条。您可以根据需要调整进度条的外观和动画效果，以适应不同的需求。