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.

Blocks

Implementation

vue
<script setup lang="ts">
import { VListSkeleton } from "veload";
import "veload/style.css";
</script>

<template>
  <VListSkeleton />
</template>

Props

VListSkeleton props
PropTypeDefaultDescription
rowsnumber3Number 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.
showAvatarbooleantrueToggles the avatar block where the pattern supports one.
avatarSizenumber48Diameter of the avatar block in pixels. Clamped to 1–160.
colorstring—Base colour of the placeholder blocks. Falls back to `--v-skeleton-base-color`.
highlightColorstring—Colour of the shimmer highlight. Falls back to `--v-skeleton-highlight-color`.
animatedbooleantrueEnables the shimmer animation. Reduced-motion preferences always disable it.
labelstring—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.