Vitral 0.2
Messages

Skeleton

The outline of content that is still loading, in any shape, from a line of text to a whole card.

WAI-ARIA tested

Import

main.ts
import { Skeleton } from '@vitral/vue';

Shapes

<script setup lang="ts">import { Skeleton } from '@vitral/vue';</script> <template>    <Skeleton shape="circle" width="3rem" />    <Skeleton width="3rem" height="3rem" />    <Skeleton width="10rem" height="3rem" border-radius="1rem" />    <Skeleton width="10rem" :animated="false" /></template>

A card loading

<script setup lang="ts">import { Skeleton } from '@vitral/vue';</script> <template>    <div aria-busy="true" style="display: grid; gap: 0.75rem; width: 100%; max-width: 24rem">        <div style="display: flex; gap: 0.75rem; align-items: center">            <Skeleton shape="circle" width="3rem" />            <div style="display: grid; gap: 0.5rem; flex: 1">                <Skeleton width="60%" />                <Skeleton width="40%" />            </div>        </div>        <Skeleton height="8rem" />        <div style="display: flex; justify-content: space-between">            <Skeleton width="5rem" height="2rem" />            <Skeleton width="5rem" height="2rem" />        </div>    </div></template>

API

Read from packages/vue/src/components/Skeleton/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
shape'rectangle' | 'circle'`'rectangle'` (the default) or `'circle'`, which also makes width and height equal.
widthstringAny CSS length. Defaults to the full width of the space it is in.
heightstringAny CSS length. Defaults to one line.
borderRadiusstring—
animatedbooleanThe sweep across the box. On by default, and off under `prefers-reduced-motion`.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.