Spinner 忙碌动画

用于忙碌动画场景的 MoriUI 组件。

导入

import { Spinner } from 'moriui'

示例

概览

基础旋转加载图标。

正在处理支付…

¥100.00

<script setup lang="ts">
  import { Item, ItemContent, ItemMedia, ItemTitle, Spinner } from 'moriui'
</script>

<template>
  <div class="flex w-full max-w-xs flex-col gap-4">
    <div class="rounded-xl bg-muted p-4">
      <Item variant="muted">
        <ItemMedia>
          <Spinner role="status" aria-label="加载中" />
        </ItemMedia>
        <ItemContent>
          <ItemTitle class="line-clamp-1">
            正在处理支付…
          </ItemTitle>
        </ItemContent>
        <ItemContent class="flex-none justify-end">
          <span class="text-sm tabular-nums">¥100.00</span>
        </ItemContent>
      </Item>
    </div>
  </div>
</template>

尺寸

四种不同尺寸。

<script setup lang="ts">
  import { Spinner } from 'moriui'
</script>

<template>
  <div class="flex items-center gap-6">
    <Spinner size="xs" />
    <Spinner size="sm" />
    <Spinner size="default" />
    <Spinner size="lg" />
  </div>
</template>

按钮

按钮内的加载状态。

<script setup lang="ts">
  import { Button, Spinner } from 'moriui'
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <div class="flex gap-2">
      <Button disabled size="sm" variant="outline">
        <Spinner data-icon="inline-start" />加载中…
      </Button>
      <Button disabled size="sm" variant="secondary">
        <Spinner data-icon="inline-start" />请稍候
      </Button>
      <Button disabled size="sm">
        <Spinner data-icon="inline-start" />处理中
      </Button>
    </div>
  </div>
</template>

徽记

徽记内的加载状态。

同步中更新中处理中

<script setup lang="ts">
  import { Badge, Spinner } from 'moriui'
</script>

<template>
  <div class="flex items-center gap-4">
    <Badge>
      <Spinner data-icon="inline-start" />同步中
    </Badge>
    <Badge variant="secondary">
      <Spinner data-icon="inline-start" />更新中
    </Badge>
    <Badge variant="outline">
      <Spinner data-icon="inline-start" />处理中
    </Badge>
  </div>
</template>

输入组合

输入框旁的加载状态。

验证中…

<script setup lang="ts">
  import { ArrowUp } from '@lucide/vue'
  import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, Spinner } from 'moriui'
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-4">
    <InputGroup>
      <InputGroupInput placeholder="发送消息…" disabled />
      <InputGroupAddon align="inline-end">
        <Spinner />
      </InputGroupAddon>
    </InputGroup>
    <InputGroup>
      <InputGroupInput placeholder="正在验证…" disabled />
      <InputGroupAddon align="inline-end">
        <Spinner /> 验证中…
        <InputGroupButton class="ml-auto" variant="default">
          <ArrowUp />
          <span class="sr-only">发送</span>
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  </div>
</template>

RTL

旋转图标在 RTL 页面中。

جاري معالجة الدفع…

١٠٠٫٠٠ دولار

<script setup lang="ts">
  import {
    DirectionProvider,
    Item,
    ItemContent,
    ItemMedia,
    ItemTitle,
    Spinner
  } from 'moriui'
</script>

<template>
  <DirectionProvider direction="rtl">
    <div class="flex w-full max-w-xs flex-col gap-4" dir="rtl">
      <div class="rounded-xl bg-muted p-4">
        <Item variant="muted" dir="rtl">
          <ItemMedia>
            <Spinner role="status" aria-label="جاري التحميل" />
          </ItemMedia>
          <ItemContent>
            <ItemTitle class="line-clamp-1">
              جاري معالجة الدفع…
            </ItemTitle>
          </ItemContent>
          <ItemContent class="flex-none justify-end">
            <span class="text-sm tabular-nums">١٠٠٫٠٠ دولار</span>
          </ItemContent>
        </Item>
      </div>
    </div>
  </DirectionProvider>
</template>

使用说明

尺寸

size 支持 xs、sm、default、lg，通过 CSS 变量控制旋转图标的大小。

RTL

Spinner 的旋转方向与书写方向无关。

变体

Spinner 的 size 支持 xs、sm、default、lg。

可访问性

Spinner 默认输出 role="status" 和 aria-label="Loading"。在按钮等具有自身语义的容器中使用时，应确保容器提供适当的加载状态描述。

API 参考

属性	类型	默认值	说明
`Spinner size`	`'xs' \| 'sm' \| 'default' \| 'lg'`	`'default'`	旋转图标的尺寸。
`Spinner class`	`HTMLAttributes["class"]`	`undefined`	合并到旋转图标容器的调用方类。