秀出进度条的 12 种趣味方式：HTML/CSS 玩转动画进度条

用代码实现时尚进度条：在单调中闪耀创意

在构建网站或应用程序时，想通过进度条展示任务的进度、文件下载的状况或其他需要向用户说明状态的过程时，您也许已司空见惯地使用现成的进度条组件或库。然而，何不尝试跳脱固有思维，仅使用 HTML 和 CSS 来实现进度条？这将使您的网站或应用程序独具特色。让我们从头开始。

1. 基础水平进度条：从简单入手

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

.progress-bar {
  width: 200px;
  height: 20px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background-color: #000;
}

只需简单的几行代码，您便拥有了一个能够显示进度的基本水平进度条。您可以通过调整 CSS 中的百分比值来控制进度条的长度，也可以通过改变 background-color 属性来改变进度条的颜色。

2. 动态进度条：增添动感元素

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

.progress-bar {
  width: 200px;
  height: 20px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background-color: #000;
  transition: width 1s ease-in-out;
}

.progress-bar:hover .progress-fill {
  width: 100%;
}

将鼠标悬停在进度条上即可填充进度条，它便生动地展现了动态变化。

3. 水平条纹进度条：玩转纹理设计

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

.progress-bar {
  width: 200px;
  height: 20px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background-color: #000;
  transition: width 1s ease-in-out;
}

.progress-stripe {
  width: 10px;
  height: 100%;
  background-color: #fff;
  margin-right: 2px;
  float: left;
}

.progress-bar:hover .progress-fill {
  width: 100%;
}

这个水准进度条增添了细条纹，使它在视觉上更具吸引力。

4. 垂直进度条：别出心裁的垂直视觉

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

.progress-bar.vertical {
  width: 20px;
  height: 200px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.progress-fill {
  width: 100%;
  height: 0%;
  background-color: #000;
  transition: height 1s ease-in-out;
}

.progress-bar:hover .progress-fill {
  height: 100%;
}

垂直进度条适用于不同场景，为您的网站或应用程序增添创意。

5. 半圆形进度条：增添美感弧度

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

.progress-bar.circular {
  width: 100px;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 50%;
}

.progress-fill {
  width: 50%;
  height: 100%;
  background-color: #000;
  transition: transform 1s ease-in-out;
}

.progress-bar:hover .progress-fill {
  transform: rotate(180deg);
}

半圆形进度条呈现出优美的圆弧形，让您的用户眼前一亮。

6. 加载条进度条：灵动诠释加载过程

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

.progress-bar.loading {
  width: 200px;
  height: 20px;
  background-color: #eee;
  border: 1px solid #ccc;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background-color: #000;
  animation: loading 1s infinite alternate;
}

@keyframes loading {
  0% {
    width: 0%;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

这款进度条动感十足，通过来回移动的动画，灵动地诠释加载过程。

7. 环形进度条：动感圆环视觉

<div class="progress-bar circular-loading">
  <div class="progress-fill"></div>
</div>

.progress-bar.circular-loading {
  width: 100px;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 50%;
}

.progress-fill {
  width: 50%;
  height: 100%;
  background-color: #000;
  animation: circular-loading 1s infinite alternate;
}

@keyframes circular-loading {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

环形进度条动感十足，圆环不断旋转，让您的用户时刻感受到进展。

8. 3D 进度条：增添空间立体感

<div class="progress-bar three-d">
  <div class="progress-fill"></div>
</div>

.progress-bar.three-d {
  width: 200px;
  height: 20px;
  background-color: #eee;
  border: 1px solid #ccc;
  perspective: 1000px;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background-color: #000;
  transform-style: preserve-3d;
  transform: rotateX(90deg) translateZ(-50px);
  transition: transform 1s ease-in-out;
}

.progress-bar:hover .progress-fill {
  transform: rotateX(90deg) translateZ(0px);
}

3D 进度条独具立体感，在旋转中展现出空间感。

9. 波浪形进度条：水流般的视觉律动

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