加载状态按钮
加载状态按钮：点击后文字切换为“提交中…”，左侧出现无限旋转的 loading 圈，防止用户重复提交。纯 CSS 提供旋转动画与打点文字，切换文字的时机通常由 JS 加 class 控制。
旋转圈做法：圆形元素只留上边框（border-top 有色，其余透明），animation: rotate 1s linear infinite。这是加载图标的标准实现。
- 转圈 = border-top 单边着色 + linear 无限旋转
- 文字“提交中…”可用 @keyframes 改 content 或 JS 切换
- 按钮 disabled + pointer-events 防重复提交
HTML
<style> .loading { position: relative; display: block; width: 200px; margin: 50px auto; padding: 14px 0; border: none; border-radius: 10px; background: #4a9eff; color: #fff; font-size: 16px; cursor: pointer; } .loading::before { content: ""; position: absolute; left: 20px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; animation: spin 1s linear infinite; opacity: 0; } .loading.busy { pointer-events: none; opacity: .8; } .loading.busy::before { opacity: 1; } @keyframes spin { to { transform: rotate(360deg); } } </style> <button class="loading" onclick="this.classList.add('busy');this.textContent='提交中…';setTimeout(()=>{this.classList.remove('busy');this.textContent='点我提交'},2000)">点我提交</button>
本节要点加载圈 = 单边 border + linear 无限旋转；配合 class 切换文字与 disabled 状态。
