Skeleton
Neo-brutalist skeleton loading component providing sub-components for common loading patterns.
Demo
变体
头像尺寸
骨架文本
骨架卡片
骨架表格
基础尺寸
形状
自定义宽度
加载质感效果（effect）
Installation
pnpm dlx brutx-vue@latest add skeletonUsage
Basic Skeleton
<script setup>
import { Skeleton } from 'brutx-ui-vue'
</script>
<template>
<Skeleton class="h-12 w-12" />
</template>Shapes
| Shape | Description |
|---|---|
rect | Rounded rectangle (rounded-brutal) |
circle | Circle (rounded-full) with equal width and height |
<template>
<div class="flex items-center gap-4">
<Skeleton shape="rect" size="lg" width="80px" />
<Skeleton shape="circle" size="lg" />
</div>
</template>Custom Width
width accepts any CSS width string, including percentages. When shape="circle", it also sets the height.
<template>
<div class="space-y-2 w-full">
<Skeleton width="100%" />
<Skeleton width="75%" />
<Skeleton width="50%" />
</div>
</template>SkeletonText
<script setup>
import { SkeletonText } from 'brutx-ui-vue'
</script>
<template>
<SkeletonText :lines="3" />
</template>SkeletonAvatar
<script setup>
import { SkeletonAvatar } from 'brutx-ui-vue'
</script>
<template>
<SkeletonAvatar size="default" />
</template>SkeletonCard
<script setup>
import { SkeletonCard } from 'brutx-ui-vue'
</script>
<template>
<SkeletonCard />
</template>SkeletonTable
<script setup>
import { SkeletonTable } from 'brutx-ui-vue'
</script>
<template>
<SkeletonTable :rows="5" :columns="4" />
</template>Variants
| Variant | Description |
|---|---|
default | Gray background |
primary | Primary color at 30% opacity |
secondary | Secondary color at 30% opacity |
accent | Accent color at 30% opacity |
Sizes
| Size | Height |
|---|---|
sm | h-8 |
default | h-10 |
lg | h-14 |
xl | h-20 |
When shape="circle", width matches height (w-8/w-10/w-14/w-20).
<template>
<div class="space-y-2">
<Skeleton size="sm" width="200px" />
<Skeleton size="default" width="200px" />
<Skeleton size="lg" width="200px" />
<Skeleton size="xl" width="200px" />
</div>
</template>Loading Texture Effects
The effect variant overlays CRT-style texture on skeleton blocks:
| Effect | Description |
|---|---|
none | Default pulse breathing |
scanlines | Overlaid CRT scanline texture |
ascii | Renders flickering ASCII terminal blocks inside (customizable via the default slot) |
<template>
<div class="space-y-2">
<Skeleton effect="scanlines" width="240px" />
<Skeleton effect="ascii" size="xl" width="240px" />
</div>
</template>Sub-components
| Component | Description |
|---|---|
Skeleton | Basic skeleton block with built-in role="status" and aria-busy="true" accessibility attributes |
SkeletonText | Multi-line skeleton text with customizable line count and last line width |
SkeletonAvatar | Circular avatar placeholder |
SkeletonCard | Complete card skeleton with image area, title, text, and button placeholders |
SkeletonTable | Table skeleton with built-in role="table" and aria-busy="true" accessibility attributes |
API Reference
Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
variant | "accent" | "default" | "primary" | "secondary" | undefined | "default" | Sets the color variant used by the skeleton placeholder. |
DetailsDeclared typeNonNullable<"default" | "primary" | "secondary" | "accent" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/skeleton/Skeleton.vue | |||
size | "default" | "lg" | "sm" | "xl" | undefined | "default" | Sets the skeleton height; when shape is circle, it also determines the circle diameter. |
DetailsDeclared typeNonNullable<"default" | "lg" | "sm" | "xl" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/skeleton/Skeleton.vue | |||
shape | "circle" | "rect" | undefined | "rect" | Selects a rectangular or circular placeholder; a circle keeps equal width and height. |
DetailsDeclared typeNonNullable<"rect" | "circle" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/skeleton/Skeleton.vue | |||
effect | "ascii" | "none" | "scanlines" | undefined | "none" | Selects the loading texture: none uses the default pulse, scanlines adds a CRT texture, and ascii renders flickering terminal blocks. |
DetailsDeclared typeNonNullable<"none" | "scanlines" | "ascii" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/skeleton/Skeleton.vue | |||
width | string | number | undefined | undefined | Overrides the skeleton width. Numbers are converted to pixels and strings are used as CSS widths; for a circle this also sets the height. |
DetailsDeclared typestring | number | undefined Default value details
Sourcepackages/ui/src/components/skeleton/Skeleton.vue | |||
class | string | undefined | undefined | Additional CSS classes applied to the skeleton status container. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/skeleton/Skeleton.vue | |||
| Name | Signature or type | Description |
|---|---|---|
#default | {} | Optional placeholder content. With the ascii effect, default terminal-block characters are rendered when this slot is empty. |
DetailsDeclared type{}Sourcepackages/ui/src/components/skeleton/Skeleton.vue | ||
SkeletonAvatar
| Name | Type | Default | Description |
|---|---|---|---|
variant | "accent" | "default" | "primary" | "secondary" | undefined | "default" | Sets the color variant of the circular avatar placeholder. |
DetailsDeclared typeNonNullable<"default" | "primary" | "secondary" | "accent" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/skeleton/SkeletonAvatar.vue | |||
size | "default" | "lg" | "sm" | "xl" | undefined | "default" | Sets the diameter of the circular avatar placeholder. |
DetailsDeclared typeNonNullable<"default" | "lg" | "sm" | "xl" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/skeleton/SkeletonAvatar.vue | |||
class | string | undefined | undefined | Additional CSS classes applied to the avatar skeleton circle. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/skeleton/SkeletonAvatar.vue | |||
SkeletonCard
| Name | Type | Default | Description |
|---|---|---|---|
variant | "accent" | "default" | "primary" | "secondary" | undefined | "default" | Sets the color variant used by the card’s skeleton placeholders. |
DetailsDeclared typeNonNullable<"default" | "primary" | "secondary" | "accent" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/skeleton/SkeletonCard.vue | |||
label | string | undefined | undefined | Sets the accessible name of the card status region; an empty string falls back to the localized loading text. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/skeleton/SkeletonCard.vue | |||
class | string | undefined | undefined | Additional CSS classes applied to the outer skeleton card container. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/skeleton/SkeletonCard.vue | |||
SkeletonTable
| Name | Type | Default | Description |
|---|---|---|---|
variant | "accent" | "default" | "primary" | "secondary" | undefined | "default" | Sets the color variant used by the table placeholder cells. |
DetailsDeclared typeNonNullable<"default" | "primary" | "secondary" | "accent" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/skeleton/SkeletonTable.vue | |||
rows | number | undefined | 5 | Sets the placeholder data row count. It defaults to 5, non-finite values use that default, and the result is clamped from 0 to 100. |
DetailsDeclared typenumber | undefined Default value details
Sourcepackages/ui/src/components/skeleton/SkeletonTable.vue | |||
columns | number | undefined | 4 | Sets the placeholder column count. It defaults to 4, non-finite values use that default, and the result is clamped from 0 to 20. |
DetailsDeclared typenumber | undefined Default value details
Sourcepackages/ui/src/components/skeleton/SkeletonTable.vue | |||
class | string | undefined | undefined | Additional CSS classes applied to the skeleton table container. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/skeleton/SkeletonTable.vue | |||
SkeletonText
| Name | Type | Default | Description |
|---|---|---|---|
variant | "accent" | "default" | "primary" | "secondary" | undefined | "default" | Sets the color variant used by the text-line skeletons. |
DetailsDeclared typeNonNullable<"default" | "primary" | "secondary" | "accent" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/skeleton/SkeletonText.vue | |||
lines | number | undefined | 3 | Sets the number of placeholder text lines. It defaults to 3 and is truncated and clamped from 0 to 100. |
DetailsDeclared typenumber | undefined Default value details
Sourcepackages/ui/src/components/skeleton/SkeletonText.vue | |||
lastLineWidth | string | undefined | "60%" | Sets the CSS width of the last line, defaulting to 60%; preceding lines use the full available width. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/skeleton/SkeletonText.vue | |||
class | string | undefined | undefined | Additional CSS classes applied to the multi-line skeleton text container. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/skeleton/SkeletonText.vue | |||
Accessibility
- ARIA Attributes:
Skeletonhas built-inrole="status"andaria-busy="true";SkeletonTablehas built-inrole="table"andaria-busy="true"