组件 · 反馈 · 原生 HTML 与 React
进度 Progress
确定进度用 <progress>,不确定用加载条 / spinner。
演示
今天的写入3 / 5
<progress class="xxd-progress" value="60" max="100"></progress>
<div class="xxd-loadbar" role="progressbar" aria-label="正在加载"></div>
<span class="xxd-spinner"></span>export function ProgressDemo() {
return (
<div className="grid w-72 gap-4">
<Meter label="今天的写入" value={60} customValue="3 / 5" />
<Loader />
</div>
);
}属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| 类名 | xxd-progress xxd-loadbar xxd-spinner xxd-skeleton xxd-meter xxd-meter__head xxd-meter__track xxd-meter__fill |
键盘与读屏
- <progress> 自带进度语义;加载条写 role=progressbar + aria-label
- spinner 是装饰时 aria-hidden,并在旁边用文字说正在做什么
规则
- 只动 transform