Skip to content
On this page

Skeleton 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
<script setup lang="ts">
import { Skeleton, Card } from '@flavorly/vanilla-components'

        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"/>

Props 📥

Props available for this component extending the default variant & global props.

PropDescriptionAccepted ValuesDefault
countNumber of elements to renderNumber1
asTag or component to render asStringdiv

Released under the MIT License.