Spinner 加载指示器
新粗野主义风格加载旋转器，提供 4 种视觉变体：标准、方块、圆点和条形。
预览
Preview
加载器类型
加载中...
旋转加载中...
方块加载中...
条形加载中...
圆点加载器尺寸
加载中...
小加载中...
默认加载中...
大加载中...
超大加载器变体
加载中...
默认加载中...
主要加载中...
次要加载中...
强调安装
pnpm dlx brutx-vue@latest add spinner用法
Spinner（标准）
vue
<script setup>
import { Spinner } from 'brutx-ui-vue'
</script>
<template>
<Spinner size="default" variant="default" />
</template>BlockSpinner
vue
<script setup>
import { BlockSpinner } from 'brutx-ui-vue'
</script>
<template>
<BlockSpinner size="default" />
</template>DotsSpinner
vue
<script setup>
import { DotsSpinner } from 'brutx-ui-vue'
</script>
<template>
<DotsSpinner size="default" />
</template>BarsSpinner
vue
<script setup>
import { BarsSpinner } from 'brutx-ui-vue'
</script>
<template>
<BarsSpinner size="default" />
</template>变体
Spinner 变体
| 变体 | 说明 |
|---|---|
default | 顶部和右侧边框透明，旋转 |
primary | 主色边框，旋转 |
secondary | 辅助色边框，旋转 |
accent | 顶部和右侧强调色边框，旋转 |
颜色方案
BlockSpinner、BarsSpinner 和 DotsSpinner 支持以下颜色方案：
| 颜色 | 说明 |
|---|---|
default | 默认前景色 |
primary | 主色 |
secondary | 辅助色 |
accent | 强调色 |
mixed | 循环使用 primary、secondary、accent、info 多种颜色（仅 BlockSpinner 和 BarsSpinner） |
尺寸
所有旋转器类型支持以下尺寸：
| 尺寸 | Spinner | Block | Bars | Dots |
|---|---|---|---|---|
sm | h-5 w-5 | h-5 w-5 | h-4 | gap-1 |
default | h-8 w-8 | h-8 w-8 | h-6 | gap-2 |
lg | h-12 w-12 | h-12 w-12 | h-8 | gap-3 |
xl | h-16 w-16 | h-16 w-16 | h-12 | gap-4 |
动画
各组件使用不同的动画效果：
| 组件 | 动画类型 | 说明 |
|---|---|---|
| Spinner | animate-spin | 旋转动画 |
| BlockSpinner | animate-pulse | 脉冲动画，4个方块依次延迟 |
| BarsSpinner | animate-pulse | 脉冲动画，5个条形依次延迟 |
| DotsSpinner | animate-bounce | 弹跳动画，3个圆点依次延迟 |
API 参考
Spinner
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | "default" | "lg" | "sm" | "xl" | undefined | "default" | 旋转指示器或 ASCII 指示器的尺寸。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | "xl" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/spinner/Spinner.vue | |||
variant | "accent" | "ascii" | "default" | "primary" | "secondary" | undefined | "default" | 选择圆环颜色变体，或使用 ascii 显示轮换的终端字符；减少动态效果偏好下 ASCII 字符停留在首帧。 |
详情声明类型NonNullable<"default" | "primary" | "secondary" | "accent" | null | undefined> | "ascii" | undefined 字面量
默认值详情
来源packages/ui/src/components/spinner/Spinner.vue | |||
label | string | undefined | undefined | 加载状态的屏幕阅读器名称；未提供或为空白时使用本地化 Loading 文案。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/spinner/Spinner.vue | |||
class | string | undefined | undefined | 追加到加载状态容器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/spinner/Spinner.vue | |||
BarsSpinner
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | BarsSpinnerSize | undefined | "default" | 条形组的高度及每根条形的宽度。 |
详情声明类型BarsSpinnerSize | undefined 字面量
关联类型 BarsSpinnerSize 类型定义 — BarsSpinnerSizetype BarsSpinnerSize = NonNullable<VariantProps<typeof barsSpinnerVariants>['size']> 默认值详情
来源packages/ui/src/components/spinner/BarsSpinner.vue | |||
color | SpinnerColor | undefined | "default" | 条形颜色； mixed 按序轮换主色、次色、强调色和信息色。 |
详情声明类型SpinnerColor | undefined 字面量
关联类型 SpinnerColor 类型定义 — SpinnerColorexport type SpinnerColor = keyof typeof SPINNER_COLOR_CLASSES | 'mixed' 默认值详情
来源packages/ui/src/components/spinner/BarsSpinner.vue | |||
label | string | undefined | undefined | 加载状态的屏幕阅读器名称；默认为本地化 Loading 文案。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/spinner/BarsSpinner.vue | |||
class | string | undefined | undefined | 追加到条形组容器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/spinner/BarsSpinner.vue | |||
BlockSpinner
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | BlockSpinnerSize | undefined | "default" | 四方块指示器整体尺寸。 |
详情声明类型BlockSpinnerSize | undefined 字面量
关联类型 BlockSpinnerSize 类型定义 — BlockSpinnerSizetype BlockSpinnerSize = NonNullable<VariantProps<typeof blockSpinnerVariants>['size']> 默认值详情
来源packages/ui/src/components/spinner/BlockSpinner.vue | |||
color | SpinnerColor | undefined | "default" | 方块颜色； mixed 按序轮换主色、次色、强调色和信息色。 |
详情声明类型SpinnerColor | undefined 字面量
关联类型 SpinnerColor 类型定义 — SpinnerColorexport type SpinnerColor = keyof typeof SPINNER_COLOR_CLASSES | 'mixed' 默认值详情
来源packages/ui/src/components/spinner/BlockSpinner.vue | |||
label | string | undefined | undefined | 加载状态的屏幕阅读器名称；默认为本地化 Loading 文案。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/spinner/BlockSpinner.vue | |||
class | string | undefined | undefined | 追加到方块组容器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/spinner/BlockSpinner.vue | |||
DotsSpinner
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | DotsSpinnerSize | undefined | "default" | 三个圆点的尺寸及点间距。 |
详情声明类型DotsSpinnerSize | undefined 字面量
关联类型 DotsSpinnerSize 类型定义 — DotsSpinnerSizetype DotsSpinnerSize = NonNullable<VariantProps<typeof dotsSpinnerVariants>['size']> 默认值详情
来源packages/ui/src/components/spinner/DotsSpinner.vue | |||
color | "default" | "primary" | "secondary" | "accent" | undefined | "default" | 三个圆点共用的颜色变体。 |
详情声明类型"default" | "primary" | "secondary" | "accent" | undefined 字面量
默认值详情
来源packages/ui/src/components/spinner/DotsSpinner.vue | |||
label | string | undefined | undefined | 加载状态的屏幕阅读器名称；默认为本地化 Loading 文案。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/spinner/DotsSpinner.vue | |||
class | string | undefined | undefined | 追加到圆点组容器的 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/spinner/DotsSpinner.vue | |||
可访问性
- ARIA 属性：所有 Spinner 组件均自动添加
role="status"属性 - 屏幕阅读器：通过
aria-label提供屏幕阅读器标签，使用sr-only类隐藏视觉文本 - 自定义标签：默认标签文本为本地化的 "Loading..."，可通过
label属性自定义