进度条 Progress

import { Progress } from './extracted/Feedback.jsx'

export function Values() {
  return (
    <div style={{ width: 360, display: 'grid', gap: 16 }}>
      <Progress value={24} label="上传进度" />
      <Progress value={64} label="学习进度" />
      <Progress value={100} label="已完成" />
    </div>
  )
}

<div style="width: 360px; display: grid; gap: 16px">
  <div
    role="progressbar"
    aria-label="上传进度"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="24"
    style="height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.09); overflow: hidden"
  >
    <div style="width: 24%; height: 100%; background: var(--zzm-accent, #a6402f)"></div>
  </div>
  <div
    role="progressbar"
    aria-label="学习进度"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="64"
    style="height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.09); overflow: hidden"
  >
    <div style="width: 64%; height: 100%; background: var(--zzm-accent, #a6402f)"></div>
  </div>
  <div
    role="progressbar"
    aria-label="已完成"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="100"
    style="height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.09); overflow: hidden"
  >
    <div style="width: 100%; height: 100%; background: var(--zzm-accent, #a6402f)"></div>
  </div>
</div>

/* tokens.css · 用到的令牌 */
:root {
  --zzm-accent: #A6402F;
}