html中怎么制作进度环圆形进度条实现方法-html教程-PHP中文网

html中怎么制作进度环圆形进度条实现方法

裘德小鎮的故事

发布： 2025-06-24 17:34:01

原创

532人浏览过

html中制作进度环的核心答案是利用svg或css绘制圆形并通过控制stroke属性实现动态效果。1. svg方式通过元素结合stroke-dasharray和stroke-dashoffset控制描边进度，使用javascript动态修改stroke-dashoffset实现动画，具有灵活性强、可定制性高的优点，但代码较复杂。2. css方式通过border-radius创建圆形，结合clip裁剪与transform: rotate()实现进度展示，代码简洁但灵活性较差，适合简单需求。两种方法均可通过添加或显示进度文字，并通过javascript更新内容。兼容性方面，svg支持广泛，css需注意老版本浏览器对clip的支持问题，建议测试并使用autoprefixer提升兼容性。

html中怎么制作进度环圆形进度条实现方法

简单来说，HTML中制作进度环，核心在于利用SVG或CSS，巧妙地绘制圆形，并通过控制stroke（描边）的属性，动态展示进度。SVG更灵活，CSS则更简洁。

解决方案

制作进度环主要有两种方式：SVG 和 CSS。各有优劣，选择哪种取决于你的具体需求。

1. SVG 方式

立即学习“前端免费学习笔记（深入）”；

SVG（Scalable Vector Graphics）提供更强大的图形控制能力。

基本原理: 使用元素绘制圆形，利用 stroke-dasharray 和 stroke-dashoffset 属性来控制描边的显示。stroke-dasharray 定义描边的虚线模式，stroke-dashoffset 定义虚线模式的偏移量。通过改变 stroke-dashoffset，可以实现进度条的动态效果。

示例代码:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" stroke="#ccc" stroke-width="10" fill="none"/>
  <circle cx="100" cy="100" r="80" stroke="#4CAF50" stroke-width="10" fill="none"
          stroke-dasharray="502.65" stroke-dashoffset="502.65" transform="rotate(-90 100 100)"
          style="transition: stroke-dashoffset 0.3s linear;"/>
</svg>

<script>
  // 模拟进度更新
  setTimeout(() => {
    const circle = document.querySelector('svg circle:nth-child(2)');
    circle.style.strokeDashoffset = 251.33; // 50%
  }, 1000);
</script>

登录后复制

cx 和 cy 定义圆心坐标。
r 定义半径。
stroke 定义描边颜色。
stroke-width 定义描边宽度。
fill="none" 表示不填充。
stroke-dasharray 的值等于圆的周长 (2 PI r)，这里是 2 3.14159 80 ≈ 502.65。
stroke-dashoffset 初始值设为 stroke-dasharray 的值，表示进度为 0%。
transform="rotate(-90 100 100)" 将圆旋转 -90 度，使进度从顶部开始。
transition 属性添加过渡效果。

优点: 灵活，可定制性强，可以添加复杂的动画效果。
缺点: 代码相对复杂，需要理解 SVG 的属性。

2. CSS 方式

CSS 方式更简洁，但灵活性稍差。

基本原理: 使用 border-radius 创建圆形，通过 clip 属性裁剪圆形，再利用 transform: rotate() 旋转元素，实现进度条的效果。

示例代码:

<div class="circle-progress">
  <div class="circle-progress-mask">
    <div class="circle-progress-fill"></div>
  </div>
  <div class="circle-progress-mask">
    <div class="circle-progress-fill"></div>
  </div>
</div>

<style>
  .circle-progress {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #ccc;
    position: relative;
  }

  .circle-progress-mask {
    width: 50%;
    height: 100%;
    position: absolute;
    overflow: hidden;
  }

  .circle-progress-mask:nth-child(1) {
    clip: rect(0, 50px, 100px, 0);
  }

  .circle-progress-mask:nth-child(2) {
    left: 50%;
    clip: rect(0, 100px, 100px, 50px);
  }

  .circle-progress-fill {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #4CAF50;
    position: absolute;
    transform-origin: left center;
    transform: rotate(60deg); /* 模拟进度 */
  }
</style>

登录后复制