24%
<div style="width:100%;max-width:460px"><div class="icen-progress" role="progressbar" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100" aria-label="构建进度" id="demo-progress"> <div class="icen-progress-track"><div class="icen-progress-bar" id="demo-progress-bar" style="width:24%"></div></div> <span class="icen-progress-label" id="demo-progress-label">24%</span></div><div class="demo-row" style="margin-top:14px"> <button class="icen-btn icen-btn-sm icen-btn-primary" id="demo-progress-run">构建一次</button> <button class="icen-btn icen-btn-sm" id="demo-progress-reset">重置</button></div></div>特性
- 尺寸：默认 6px 轨道；
icen-progress--sm4px 细轨 - 标签：
icen-progress-labeltabular-nums 百分比，数字变化不抖版式 - 驱动：
style.width赋值即得平滑过渡（reduced-motion 直落）；role="progressbar"+aria-valuenow同步读屏
安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import '@icen.ai/ui/kit/progress';也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add progress
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/feedback.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
<div class="icen-progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"> <div class="icen-progress-track"><div class="icen-progress-bar" style="width:64%"></div></div> <span class="icen-progress-label">64%</span></div>