加载指示 / Spinner

用动画指示加载状态。

尺寸

从小到大不同尺寸。

小号

默认

大号

示例代码

<Spinner className="size-3" />

按钮内嵌

操作中内嵌加载指示。

示例代码

<button className="inline-flex items-center gap-2">
  <Spinner className="size-3" />
  保存中
</button>

遮罩层

居中的遮罩加载状态。

正在加载内容预览...

示例代码

<div className="relative">
  <div className="absolute inset-0 flex items-center justify-center">
    <Spinner className="size-6" />
  </div>
</div>

Loading dashboard...