Components
Skeleton
Display a placeholder while content is loading.
Usage
Use to show a placeholder while content is loading.
<template>
<div class="flex items-center space-x-4">
<USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" />
<div class="space-y-2">
<USkeleton class="h-4 w-[250px]" />
<USkeleton class="h-4 w-[200px]" />
</div>
</div>
</template>
Props
as
string
"div"ui
{ base?: string; background?: string; rounded?: string; } & { [key: string]: any; } & { strategy?: Strategy; }
{}Config
{
base: 'animate-pulse',
background: 'bg-gray-100 dark:bg-gray-800',
rounded: 'rounded-md',
}