Vanilla ComponentsSkeleton Loaders
The skeleton loaders are used to display a busy state of your app, and fill the white gaps with a nice animation.
Preview & Playground 🖼️
Here you may find a preview of the component, with error & possible variants.
🏄 Click to expand the code
vue
<script setup lang="ts">
import { Skeleton, Card } from '@flavorly/vanilla-components'
</script>
<template>
<PreviewWrapper>
<Card
title="Skeletons"
subtitle="Here you can check skeleton loaders examples"
>
<div class="p-5 text-sm space-y-2">
<Skeleton :count="1" />
<Skeleton variant="circle" :count="1" />
<Skeleton variant="vanilla" :count="1" class="h-10 w-10 rounded-full"/>
<Skeleton variant="vanilla" :count="1" class="h-20 w-full rounded-lg"/>
</div>
</Card>
</PreviewWrapper>
</template>
Props 📥
Props available for this component extending the default variant & global props.
| Prop | Description | Accepted Values | Default |
|---|---|---|---|
count | Number of elements to render | Number | 1 |
as | Tag or component to render as | String | div |