加载指示器

Processing payment...

安装Terminal

npm install @a3s-lab/ui@0.4.0

<svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

用法

引入 CSS

导入 Tailwind 和一个完整的 A3S UI 样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

或者仅当该组件不与其他 A3S UI 组件组合时才导入 Tailwind。

@import "tailwindcss";

Spinner 是纯 HTML 加上 Tailwind 工具类，没有专用的 CSS 组件文件。

使用CDN或批量程序导入？请参见安装页。

添加加载指示器 HTML

加载指示器使用纯 HTML、loader-circle Lucide 图标和 animate-spin Tailwind 工具类。添加 role="status" 和 aria-label="加载中" 以提供无障碍状态说明。

用户启用减少动效后，完整 A3S UI 样式会停止旋转。请保留无障碍标签和相邻状态文案，让静止图标仍能清楚表达处理进度。

<svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>

示例

尺寸

使用 size-* 工具类调整加载指示器的大小。

<div class="flex items-center gap-6"><svg aria-label="Loading" role="status" class="size-3 animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg><svg aria-label="Loading" role="status" class="size-4 animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg><svg aria-label="Loading" role="status" class="size-6 animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg><svg aria-label="Loading" role="status" class="size-8 animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg></div>

按钮

在按钮中添加加载指示器来表达加载状态。它可以放在标签之前或之后，按钮会自动处理间距。

<div class="flex flex-col items-center gap-4">
  <button class="btn" data-size="sm" disabled><svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
    Loading...
  </button>
  <button class="btn" data-variant="outline" data-size="sm" disabled><svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
    Please wait
  </button>
  <button class="btn" data-variant="secondary" data-size="sm" disabled><svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
    Processing
  </button>
</div>

徽章

在徽章中添加加载指示器来表达加载状态。它可以放在标签之前或之后，徽章会自动处理间距。

SyncingUpdatingProcessing

<div class="flex items-center gap-4">
  <span class="badge"><svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
    Syncing
  </span>
  <span class="badge" data-variant="secondary"><svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
    Updating
  </span>
  <span class="badge" data-variant="outline"><svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
    Processing
  </span>
</div>

输入组

<div class="flex w-full max-w-md flex-col gap-4">
  <div class="input-group">
    <input aria-label="消息" placeholder="Send a message..." disabled />
    <span data-align="inline-end"><svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg></span>
  </div>
  <div class="input-group">
    <textarea aria-label="消息" placeholder="Send a message..." disabled></textarea>
    <footer data-align="block-end"><svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
      Validating...
      <button type="button" class="btn ms-auto" data-size="icon-sm"><svg class="lucide lucide-arrow-up" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7" /><path d="M12 19V5" /></svg>
        <span class="sr-only">Send</span>
      </button>
    </footer>
  </div>
</div>

空

Processing your request

Please wait while we process your request. Do not refresh the page.

<div class="empty w-full">
  <header>
    <figure><svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg></figure>
    <h3>Processing your request</h3>
    <p>Please wait while we process your request. Do not refresh the page.</p>
  </header>
  <section> <button class="btn" data-variant="outline" data-size="sm">Cancel</button></section>
</div>

RTL

加载指示器的布局遵循文档方向。周围间距与方向有关时，请使用逻辑属性工具类。

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

<article class="item bg-muted/50 border-transparent" dir="rtl">
  <figure><svg aria-label="Loading" role="status" class="animate-spin lucide lucide-loader-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg></figure>
  <section> <h3>جاري معالجة الدفع...</h3></section>
  <aside class="tabular-nums text-sm">١٠٠.٠٠ دولار</aside>
</article>