Spin 设计文档
加载指示器,严格对齐 Semi Design:统一 DOM(.cd-spin > .cd-spin-wrapper 指示器 + .cd-spin-children 内容),有 children 时块级包裹并遮罩内容(opacity 0.5、不可交互),无 children 时独立指示器。delay 延迟去抖(复用 @chenzy-design/core createSpinController,无 minShowTime)。role=status + aria-live=polite 公布加载,装饰 SVG aria-hidden,reduced-motion 退化为呼吸。spinning 受控不回写。
← API 文档使用建议
加载指示器,严格对齐 Semi Design:统一 DOM(.cd-spin > .cd-spin-wrapper 指示器 + .cd-spin-children 内容),有 children 时块级包裹并遮罩内容(opacity 0.5、不可交互),无 children 时独立指示器。delay 延迟去抖(复用 @chenzy-design/core createSpinController,无 minShowTime)。role=status + aria-live=polite 公布加载,装饰 SVG aria-hidden,reduced-motion 退化为呼吸。spinning 受控不回写。
Accessibility
- loading 时 .cd-spin-wrapper 使用 role=status + aria-live=polite(隐式 aria-atomic)公布加载;无 tip 时以 i18n Spin.loading 为 aria-label;内置渐变 SVG aria-hidden;组件无可聚焦元素,不进入 Tab 序列;reduced-motion 旋转退化为 opacity 呼吸。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-animation-duration-spin-custom-children-spin | 1600ms | 自定义指示器时旋转一周时长 |
--cd-animation-duration-spin-wrapper-spin | 600ms | 加载图标容器旋转一周时长 |