Skeleton preset
List
Avatar list rows
VListSkeletonlist pattern
<VListSkeleton />
Controls
The picker cannot show transparency. Type an rgba() value to keep it.
The picker cannot show transparency. Type an rgba() value to keep it.
Implementation
<script setup lang="ts">
import { VListSkeleton } from "veload";
import "veload/style.css";
</script>
<template>
<VListSkeleton />
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows | number | 3 | Number of repeated text lines, list items, fields or data rows. Clamped to 1–12. Table and dashboard headers are separate; dashboard always includes one fixed header. |
showAvatar | boolean | true | Toggles the avatar block where the pattern supports one. |
avatarSize | number | 48 | Diameter of the avatar block in pixels. Clamped to 1–160. |
color | string | — | Base colour of the placeholder blocks. Falls back to `--v-skeleton-base-color`. |
highlightColor | string | — | Colour of the shimmer highlight. Falls back to `--v-skeleton-highlight-color`. |
animated | boolean | true | Enables the shimmer animation. Reduced-motion preferences always disable it. |
label | string | — | Accessible name announced by the status region. Without a label the skeleton stays hidden from assistive technology. |
About this preset
- Compact rows with an optional leading avatar.
- Suitable for sidebars, inboxes and pickers.
- Two text lines per row keep the block dense.