Skeleton preset
Profile
Profile header with statistics
VProfileSkeletonprofile pattern
<VProfileSkeleton />
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 { VProfileSkeleton } from "veload";
import "veload/style.css";
</script>
<template>
<VProfileSkeleton />
</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. |
avatarSize | number | 48 | Diameter of the avatar block in pixels. Clamped to 1–160. |
showStats | boolean | true | Toggles the statistic tiles used by profile and dashboard patterns. |
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
- An avatar beside the name and supporting lines.
- Optional statistic tiles span the full width.
- The avatar size is configurable with `avatarSize`.