html中制作进度环的核心答案是利用svg或css绘制圆形并通过控制stroke属性实现动态效果。1. svg方式通过<circle>元素结合stroke-dasharray和stroke-dashoffset控制描边进度，使用javascript动态修改stroke-dashoffset实现动画，具有灵活性强、可定制性高的优点，但代码较复杂。2. css方式通过border-radius创建圆形，结合clip裁剪与transform: rotate()实现进度展示，代码简洁但灵活性较差，适合简单需求。两种方法均可通过添加<text>或<span>显示进度文字，并通过javascript更新内容。兼容性方面，svg支持广泛，css需注意老版本浏览器对clip的支持问题，建议测试并使用autoprefixer提升兼容性。
简单来说，HTML中制作进度环，核心在于利用SVG或CSS，巧妙地绘制圆形，并通过控制stroke（描边）的属性，动态展示进度。SVG更灵活，CSS则更简洁。
解决方案
制作进度环主要有两种方式：SVG 和 CSS。各有优劣，选择哪种取决于你的具体需求。
1. SVG 方式
立即学习“前端免费学习笔记（深入）”；
SVG（Scalable Vector Graphics）提供更强大的图形控制能力。
基本原理: 使用
<circle>元素绘制圆形，利用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>-
.circle-progress是容器，定义圆形的基本样式。 -
.circle-progress-mask用于裁剪圆形，分成左右两半。 -
.circle-progress-fill是填充的颜色，通过transform: rotate()旋转，实现进度效果。 -
transform-origin: left center设置旋转中心点。
-
优点: 代码简洁，易于理解。
缺点: 灵活性较差，难以实现复杂的动画效果。只能实现半圆以上的进度。
如何动态更新进度环的进度？
无论是 SVG 还是 CSS 方式，动态更新进度都需要 JavaScript 的配合。
-
SVG: 通过 JavaScript 获取 SVG 元素，修改
stroke-dashoffset属性的值。 -
CSS: 通过 JavaScript 获取 CSS 元素，修改
transform: rotate()的角度值。
核心思路是，根据进度百分比，计算出对应的 stroke-dashoffset 或旋转角度，然后更新元素的样式。
如何添加进度文字显示？
可以在进度环的中心添加文字，显示当前的进度百分比。
-
SVG: 在 SVG 中添加
<text>元素，设置其x和y属性，使其居中显示。 -
CSS: 在
.circle-progress容器中添加一个<span>元素，使用position: absolute和transform: translate()使其居中显示。
然后，通过 JavaScript 更新文字内容，显示当前的进度百分比。
如何兼容不同的浏览器？
- SVG: SVG 的兼容性较好，主流浏览器都支持。
-
CSS:
clip属性在一些老版本浏览器中可能存在兼容性问题。可以使用其他方法，例如mask-image，但兼容性也需要考虑。
建议在开发过程中，进行充分的测试，确保在不同浏览器中都能正常显示。可以使用 Autoprefixer 自动添加浏览器前缀，提高兼容性。
