Spinner 加载圈

基础加载指示器，一个旋转的图标，用于行内或轻量加载状态。

加载圈是最基础的加载指示器，仅渲染一个旋转图标，通过 class 控制尺寸与颜色。

何时使用

  • 行内、按钮内或轻量区域的加载指示。
  • 需要完整加载容器（遮罩、文案、进度、全屏）时，请使用 Spin 加载中。

代码演示

基础用法

<template>
  <Spinner />
</template>

自定义尺寸与颜色

Spinner 默认 size-4，通过 class 传入 Tailwind 类控制尺寸和颜色。

<template>
  <div class="flex items-center gap-4">
    <Spinner class="size-4" />
    <Spinner class="size-6 text-primary" />
    <Spinner class="size-8 text-destructive" />
  </div>
</template>

导入

import { Spinner } from "@reglow/reui";

API

Spinner

属性说明类型默认值
class附加类名（控制尺寸 / 颜色）HTMLAttributes["class"]-
Label 标签
基于 reka-ui Label，用于表单字段标题，支持 for 关联与无障碍。
Toggle 开关按钮
可切换按下/弹起状态的按钮