Skip to content

Spinner 加载指示器 ​

表示「正在加载」。三档尺寸沿用语义图标 16 / 16 / 20 的刻度,与控件三档一一对应。

三档尺寸

沿用「语义图标 16 / 16 / 20」的刻度,与控件三档一一对应 —— sm 与 md 视觉上相同不是笔误。

<pt-spinner size="sm"></pt-spinner>
<pt-spinner></pt-spinner>
<pt-spinner size="lg"></pt-spinner>
自定义读屏文案

默认念当前 locale 的「加载中」;知道在加载什么时,说得更具体一点。

<pt-spinner label="正在加载报表"></pt-spinner>

无障碍 ​

宿主是 role="status" + aria-live="polite",出现时读屏会念一遍 label。 默认文案取当前 locale 的「加载中」,跟着 lang 属性或 setLocale() 切换; 知道在加载什么时,用 label 说得更具体一点。

减少动态效果 ​

系统开了「减少动态效果」时,转圈改成慢速脉冲而不是完全静止 —— 完全静止会让「正在加载」这个信息彻底消失。

按钮里的加载态 ​

pt-button 的 loading 内部用的就是它,尺寸跟着按钮档位走,不需要自己往按钮里塞 spinner。

API ​

属性

属性Attribute类型默认值说明
labellabelstring | undefined—读屏文案。默认取当前 locale 里的「加载中」
sizesize"lg" | "md" | "sm"'md'尺寸档位

可定制的内部元素(::part())

part说明
base内部的 svg

CSS 变量

变量说明
--pt-spinner-color颜色,默认取正文档 --pt-text-standard

Apache-2.0 协议开源