Spinner 加载中 - Docs - Artefact

Spinner 加载中

Feedback

展示型

Introduction

Spinner 组件是一个动画圆形指示器，用于表示活跃的等待状态。非常适合快速过渡、表单提交和加载弹窗浮层，可通过明确的缩放范围和无障碍描述进行自定义。

你可以按以下方式定位和配置 spinner：

默认加载器，适用于在区块、页面居中容器或侧边栏面板中指示系统进度。

{
  "type": "spinner",
  "size": "md",
  "label": "Loading..."
}

具备大尺寸视觉跟踪，通常用作整页重载或初始工作区同步时的中心焦点。

{
  "type": "spinner",
  "size": "lg",
  "label": "Synchronizing data..."
}

用于在密集仪表盘或紧凑上下文卡片中表示单个资源重新加载的小号加载器。

{
  "type": "spinner",
  "size": "sm",
  "label": "Connecting..."
}

属性	CMS 字段类型	默认值	描述 / 支持的选项
尺寸比例 (`size`)	`select`	`"md"`	控制圆形加载器的直径和线宽。 • 选项：`"xs"`、`"sm"`、`"md"`、`"lg"`、`"xl"`、`"2xl"`。
无障碍标签 (`label`)	`string`	-	无障碍屏幕阅读器软件播报的替代描述。强烈建议保留以确保页面合规。

开箱即用的无障碍： 每个 spinner 都编译为原生 role="status" 包裹层，包含仅供屏幕阅读器的标签（class="sr-only"），确保屏幕阅读器正确播报活跃进度。
纯 SVG 渲染： Spinner 动画使用轻量矢量路径（<svg>）通过 CSS 关键帧旋转，无需重型资源依赖或静态图片加载。
最佳布局尺寸： 尺寸比例精确对应设计系统的间距令牌，保证在按钮、告警或自定义卡片中对齐。

Skeleton 骨架屏

Toast 轻提示