在 HTML/CSS 中实现各种类型的“进度条”效果，可以通过多种方式实现，涵盖基础静态条、动画条、圆形进度条等。下面是几种常见类型的完整示例代码。

✅ 方式一：原生 HTML5 <progress> 元素（最简单）

<progress value="70" max="100" style="width: 300px;"></progress>

✅ 优点：

  • 原生支持，无需额外样式。
  • 浏览器自动渲染。

❌ 缺点：

  • 可定制性差，不美观。

✅ 方式二：自定义横向进度条（带百分比）

<style>
  .progress-bar {
    width: 300px;
    height: 20px;
    background-color: #eee;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }

  .progress-bar-fill {
    height: 100%;
    background-color: #4caf50;
    width: 70%; /* 控制进度百分比 */
    transition: width 0.3s ease;
  }

  .progress-bar-text {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    color: #000;
  }
</style>

<div class="progress-bar">
  <div class="progress-bar-fill"></div>
  <div class="progress-bar-text">70%</div>
</div>

✅ 方式三：带动画的进度条（加载中效果）

<style>
  .animated-progress {
    width: 300px;
    height: 10px;
    background: #ddd;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
  }

  .animated-progress::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 50%;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    animation: move 1s linear infinite;
  }

  @keyframes move {
    0% { left: -50%; }
    100% { left: 100%; }
  }
</style>

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

✅ 方式四：圆形进度条（环形进度指示）

<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="54" stroke="#eee" stroke-width="12" fill="none"/>
  <circle cx="60" cy="60" r="54" stroke="#4caf50" stroke-width="12"
          fill="none" stroke-linecap="round"
          stroke-dasharray="339.29" stroke-dashoffset="101.79"
          transform="rotate(-90 60 60)" />
  <text x="60" y="65" text-anchor="middle" font-size="20" fill="#000">70%</text>
</svg>

注：

  • 外圆半径 r = 54，所以周长约 2πr ≈ 339.29
  • stroke-dashoffset = 周长 * (1 - 进度百分比)，比如 339.29 * (1 - 0.7) ≈ 101.79

✅ 方式五：垂直进度条

<style>
  .vertical-bar {
    width: 30px;
    height: 200px;
    background: #eee;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
  }

  .vertical-fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60%; /* 控制进度高度 */
    background: #2196f3;
    transition: height 0.5s;
  }
</style>

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

总结：常见进度条类型

类型适合场景是否可定制是否动画
<progress>简单展示否否
自定义横向条表单、加载等✅ 高度可控✅
动画进度条正在加载状态✅✅
圆形进度条可视化展示，如图表✅ 复杂✅
垂直进度条柱状图、仪表类✅✅

如果你有具体的样式风格或应用场景（比如带图标的上传进度、可点击进度条、渐变背景等），可以告诉我，我可以给你一个更精准的定制代码。需要吗？