Spinner
Neo-brutalist loading spinner offering 4 visual variants: standard, block, dots, and bars.
Demo
Preview
加载器类型
加载中...
旋转加载中...
方块加载中...
条形加载中...
圆点加载器尺寸
加载中...
小加载中...
默认加载中...
大加载中...
超大加载器变体
加载中...
默认加载中...
主要加载中...
次要加载中...
强调Installation
pnpm dlx brutx-vue@latest add spinnerUsage
Spinner (Standard)
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>Variants
Spinner Variants
| Variant | Description |
|---|---|
default | Transparent top and right borders, spinning |
primary | Primary color border, spinning |
secondary | Secondary color border, spinning |
accent | Transparent top and right accent color borders, spinning |
Color Schemes
BlockSpinner, BarsSpinner, and DotsSpinner support the following color schemes:
| Color | Description |
|---|---|
default | Default foreground color |
primary | Primary color |
secondary | Secondary color |
accent | Accent color |
mixed | Cycles through primary, secondary, accent, and info colors (BlockSpinner and BarsSpinner only) |
Sizes
All spinner types support the following sizes:
| Size | 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 |
Animation
Each component uses different animation effects:
| Component | Animation Type | Description |
|---|---|---|
| Spinner | animate-spin | Spinning animation |
| BlockSpinner | animate-pulse | Pulse animation with staggered delay across 4 blocks |
| BarsSpinner | animate-pulse | Pulse animation with staggered delay across 5 bars |
| DotsSpinner | animate-bounce | Bounce animation with staggered delay across 3 dots |
API Reference
Spinner
| Name | Type | Default | Description |
|---|---|---|---|
size | "default" | "lg" | "sm" | "xl" | undefined | "default" | The size of the circular or ASCII spinner. |
DetailsDeclared typeNonNullable<"default" | "lg" | "sm" | "xl" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/spinner/Spinner.vue | |||
variant | "accent" | "ascii" | "default" | "primary" | "secondary" | undefined | "default" | Selects a ring color variant or ascii for a rotating terminal character. Under reduced-motion preferences, the ASCII spinner stays on its first frame. |
DetailsDeclared typeNonNullable<"default" | "primary" | "secondary" | "accent" | null | undefined> | "ascii" | undefined Literal values
Default value details
Sourcepackages/ui/src/components/spinner/Spinner.vue | |||
label | string | undefined | undefined | The screen-reader name for the loading status; localized loading text is used when omitted or blank. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/spinner/Spinner.vue | |||
class | string | undefined | undefined | CSS classes added to the loading status container. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/spinner/Spinner.vue | |||
BarsSpinner
| Name | Type | Default | Description |
|---|---|---|---|
size | BarsSpinnerSize | undefined | "default" | The height of the bar group and the width of each bar. |
DetailsDeclared typeBarsSpinnerSize | undefined Literal values
Referenced types BarsSpinnerSize Type definition — BarsSpinnerSizetype BarsSpinnerSize = NonNullable<VariantProps<typeof barsSpinnerVariants>['size']> Default value details
Sourcepackages/ui/src/components/spinner/BarsSpinner.vue | |||
color | SpinnerColor | undefined | "default" | The bar color; mixed cycles through primary, secondary, accent, and info colors. |
DetailsDeclared typeSpinnerColor | undefined Literal values
Referenced types SpinnerColor Type definition — SpinnerColorexport type SpinnerColor = keyof typeof SPINNER_COLOR_CLASSES | 'mixed' Default value details
Sourcepackages/ui/src/components/spinner/BarsSpinner.vue | |||
label | string | undefined | undefined | The screen-reader name for the loading status; defaults to localized loading text. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/spinner/BarsSpinner.vue | |||
class | string | undefined | undefined | CSS classes added to the bar-group container. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/spinner/BarsSpinner.vue | |||
BlockSpinner
| Name | Type | Default | Description |
|---|---|---|---|
size | BlockSpinnerSize | undefined | "default" | The overall size of the four-block indicator. |
DetailsDeclared typeBlockSpinnerSize | undefined Literal values
Referenced types BlockSpinnerSize Type definition — BlockSpinnerSizetype BlockSpinnerSize = NonNullable<VariantProps<typeof blockSpinnerVariants>['size']> Default value details
Sourcepackages/ui/src/components/spinner/BlockSpinner.vue | |||
color | SpinnerColor | undefined | "default" | The block color; mixed cycles through primary, secondary, accent, and info colors. |
DetailsDeclared typeSpinnerColor | undefined Literal values
Referenced types SpinnerColor Type definition — SpinnerColorexport type SpinnerColor = keyof typeof SPINNER_COLOR_CLASSES | 'mixed' Default value details
Sourcepackages/ui/src/components/spinner/BlockSpinner.vue | |||
label | string | undefined | undefined | The screen-reader name for the loading status; defaults to localized loading text. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/spinner/BlockSpinner.vue | |||
class | string | undefined | undefined | CSS classes added to the block-group container. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/spinner/BlockSpinner.vue | |||
DotsSpinner
| Name | Type | Default | Description |
|---|---|---|---|
size | DotsSpinnerSize | undefined | "default" | The size of the three dots and their spacing. |
DetailsDeclared typeDotsSpinnerSize | undefined Literal values
Referenced types DotsSpinnerSize Type definition — DotsSpinnerSizetype DotsSpinnerSize = NonNullable<VariantProps<typeof dotsSpinnerVariants>['size']> Default value details
Sourcepackages/ui/src/components/spinner/DotsSpinner.vue | |||
color | "default" | "primary" | "secondary" | "accent" | undefined | "default" | The color variant shared by all three dots. |
DetailsDeclared type"default" | "primary" | "secondary" | "accent" | undefined Literal values
Default value details
Sourcepackages/ui/src/components/spinner/DotsSpinner.vue | |||
label | string | undefined | undefined | The screen-reader name for the loading status; defaults to localized loading text. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/spinner/DotsSpinner.vue | |||
class | string | undefined | undefined | CSS classes added to the dot-group container. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/spinner/DotsSpinner.vue | |||
Accessibility
- ARIA Attributes: All Spinner components automatically add the
role="status"attribute - Screen Readers: Provides screen reader labels via
aria-label, using thesr-onlyclass to hide visual text - Custom Labels: The default label text is the localized "Loading..." and can be customized via the
labelprop