skeleton

A placeholder while content loads.

Example

Laravel

<x-admin::grid min="12rem">
    <x-admin::skeleton lines="3" />
    <div><x-admin::spinner /></div>
</x-admin::grid>

Props

PropRequiredDefaultOptions
width"100%"
height"0.875rem"
lines1

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Skeleton } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div style="--_min:12rem;--_gap:var(--ad-space-4);gap:var(--_gap)" class="adm-grid"><div class="adm-stack" aria-hidden="true">
                    <div class="adm-skeleton" style="height:0.875rem;width:100%"></div>
                    <div class="adm-skeleton" style="height:0.875rem;width:100%"></div>
                    <div class="adm-skeleton" style="height:0.875rem;width:60%"></div>
            </div>
    <div><span class="adm-spinner" role="status" aria-label="Loading"></span>
</div></div>