不能直接套在按钮上，因其是块级语义元素，html规范禁止嵌入内，且仅支持水平条形态，无法通过css变为环形；环形进度条需用circle-progress组件、canvas绘制或svg方案实现。
为什么不用 <progress></progress> 直接套在按钮上
因为 <progress></progress> 是块级语义元素，不能直接嵌入 <button></button> 内部（HTML 规范禁止），强行写成 <button><progress></progress></button> 会导致渲染异常或被浏览器忽略进度条样式。更关键的是：原生 <progress></progress> 不支持环形形态 —— 它只渲染为水平条，无论你怎么加 border-radius 都无法变成圆环。
用 circle-progress Web Component 最省事
它专为环形设计，且是标准自定义元素，可直接作为按钮的子内容或叠加层使用：
<button disabled> <circle-progress value="65" max="100" size="48"></circle-progress><span>提交中…</span> </button>
注意三点：
- 必须通过
<script type="module"></script>或 CDN 引入，例如：import 'https://unpkg.com/circle-progress@latest' -
size属性控制直径（单位 px），建议设为偶数，避免 SVG 渲染模糊 - 按钮本身要加
disabled或用 JS 控制交互态，否则用户可能重复点击 ——circle-progress不自动禁用父容器
Canvas 手动绘制时如何对齐到按钮中心
Canvas 绘制环形进度条本质是画弧，但难点在于动态居中：按钮尺寸可能随文字、padding 变化，不能写死坐标。
正确做法是用 getBoundingClientRect() 实时计算：
const btn = document.querySelector('button');
const canvas = btn.querySelector('canvas');
const rect = btn.getBoundingClientRect();
const centerX = rect.width / 2;
const centerY = rect.height / 2;
// 然后传给 drawArc(ctx, centerX, centerY, radius, startAngle, endAngle)
常见坑：
- 忘记调用
ctx.clearRect()导致旧帧残留，动画糊成一片 - 用
px值硬编码半径，结果在高 DPI 屏幕上变细甚至消失 —— 应基于canvas.width / 2 * window.devicePixelRatio动态算 - 没监听按钮
resize（实际是字体/内容变化）导致偏移，需用ResizeObserver监控按钮尺寸
CSS + SVG 方案里最易忽略的细节
用 SVG <circle></circle> + CSS stroke-dasharray 是轻量选择，但按钮内嵌 SVG 时容易出错：
错误写法：<button><svg><circle r="20"></circle></svg></button> —— r 是绝对半径，不随按钮缩放
正确做法：
- SVG 设
viewBox="0 0 100 100"，<circle cx="50" cy="50" r="40"></circle> - 按钮设
position: relative，SVG 设width: 1em; height: 1em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 用 JS 更新
circle的stroke-dashoffset，计算公式：offset = circumference * (1 - value / max)
真正难的是响应式：按钮文字换行、font-size 缩放、padding 变化都会影响 SVG 定位，1em 并不总等于按钮高度 —— 最稳妥是用 ResizeObserver + getComputedStyle(btn).fontSize 动态重设 SVG 尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
