SusSpinner

不确定态忙碌指示器 —— 仅有尺寸与颜色。

包

SusKit · 原子（商业）

在 Playground 中打开

SusKit · Atoms

属性

名称	类型	默认值
Size	Prop<string>	"md"
Color	Prop<string>	"primary"
Dual	Prop<bool>	false

插槽

没有插槽。

事件

没有公开事件。

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• sus-hidden
• sus-spinner
• sus-spinner__arc
• sus-spinner__arc--inner
• sus-spinner--danger
• sus-spinner--dual
• sus-spinner--lg
• sus-spinner--md
• sus-spinner--primary
• sus-spinner--secondary
• sus-spinner--sm
• sus-spinner--success
• sus-spinner--warning
• sus-spinner--white
• sus-spinner--xl
• sus-spinner--xs

用法

<template>
  <sus:SusSpinner Size="md" Color="primary" />
</template>

var spin = new SusSpinner();
spin.Size.Value = "lg";
spin.Color.Value = "secondary";

双弧

Dual = true 会添加第二条向反方向旋转的内弧：

var spin = new SusSpinner();
spin.Dual.Value = true;

两条弧都带有基础类 sus-spinner__arc，因此作用于 .sus-spinner__arc 的皮肤规则会同时影响两者；用 .sus-spinner__arc--inner 区分它们。组件通过 .sus-spinner__arc.sus-spinner__arc--inner 上的复合规则保持内弧的默认外观：width/height 保持 auto（尺寸由 20% 的内缩决定），并且在 .sus-spinner--dual 下（xs/lg/xl 还要加上尺寸类），其上边缘保持透明，边框宽度随尺寸变化。若某条皮肤规则在优先级上压过这些规则，并在 .sus-spinner__arc 上设置了 width、height、border-top-color 或 border-width，内弧也会随之改变——请添加一条对应的 .sus-spinner__arc.sus-spinner__arc--inner 规则，把这些值恢复回来。

尺寸

xs · sm · md · lg · xl

颜色

primary · secondary · success · danger · warning · info

备注

• 没有停止 spinner 的 API——它始终在旋转。要隐藏它，请将其从层级中移除。
• 从树中移除后再加回的 spinner 会重新开始旋转。

Reduce motion

SusMotion.Reduce 开启时，旋转暂停，弧线停在起始角度，根元素获得 sus-spinner--reduced，以便皮肤为静止的加载指示器设置样式。关闭该标志后恢复旋转。