加载指示器

Processing payment...

用途

Include CSS

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

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

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

@import "tailwindcss";

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

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

Add your spinner HTML

旋转器是纯HTML，使用loader-circle Lucide图标和animate-spin Tailwind工具类。添加role="status"和aria-label="加载中"以实现可访问性。

<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-* 工具类类更改微调器的大小。

按钮

向按钮添加微调器以指示加载状态。将旋转器放置在标签之前或之后；按钮间距是自动处理的。

徽章

将微调器添加到徽章以指示加载状态。将旋转器放置在标签之前或之后；徽章间距是自动处理的。

Syncing

Updating

Processing

输入组

空

Processing your request

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

RTL

微调器布局遵循文档方向。当周围间距取决于方向时，请使用逻辑工具类。

#加载指示器

Processing payment...

#用途

Include CSS

Add your spinner HTML

#示例

#尺寸

#按钮

#徽章

#输入组

#空

#RTL

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

加载指示器

用途

示例

尺寸

按钮

徽章

输入组

空

RTL