Svelte Skeleton - Flowbite

The skeleton component can be used as an alternative loading indicator to the spinner by mimicking the content that will be loaded such as text, images, or video

Use the skeleton component to indicate a loading status with placeholder elements that look very similar to the type of content that is being loaded such as paragraphs, images, videos, and more.

Setup #

  • Svelte
<script>
  import { CardPlaceholder, ImagePlaceholder, ListPlaceholder, Skeleton, TestimonialPlaceholder, TextPlaceholder, VideoPlaceholder, WidgetPlaceholder } from 'flowbite-svelte'
</script>

Default skeleton #

  Edit on GitHub
Loading...
Loading...
Loading...
Loading...
Loading...
  • Svelte
<script>
  import { Skeleton } from 'flowbite-svelte'
</script>

  <Skeleton size="sm" class="my-8" />
  <Skeleton size="md" class="my-8" />
  <Skeleton size="lg" class="my-8" />
  <Skeleton size="xl" class="my-8" />
  <Skeleton size="xxl" class="mt-8 mb-2.5" />

Image placeholder #

  Edit on GitHub
Loading...
Loading...
  • Svelte
<script>
  import { ImagePlaceholder } from 'flowbite-svelte'
</script>

<ImagePlaceholder />
<ImagePlaceholder imgHeight={60} class='mt-8'/>

Video placeholder #

  Edit on GitHub
Loading...
Loading...
Loading...
Loading...
Loading...
  • Svelte
<script>
  import { VideoPlaceholder } from 'flowbite-svelte'
</script>

<VideoPlaceholder />
<VideoPlaceholder size='md' class='mt-8'/>
<VideoPlaceholder size='lg' class='mt-8'/>
<VideoPlaceholder size='xl' class='mt-8'/>
<VideoPlaceholder size='xxl' class='mt-8'/>

Text placeholder #

  Edit on GitHub
Loading...
Loading...
Loading...
Loading...
Loading...
  • Svelte
<script>
  import { TextPlaceholder } from 'flowbite-svelte'
</script>

<TextPlaceholder />
<TextPlaceholder size='md' class='mt-8'/>
<TextPlaceholder size='lg' class='mt-8'/>
<TextPlaceholder size='xl' class='mt-8'/>
<TextPlaceholder size='xxl' class='mt-8'/>

Card placeholder #

  Edit on GitHub
Loading...
Loading...
Loading...
Loading...
Loading...
  • Svelte
<script>
  import { CardPlaceholder } from 'flowbite-svelte'
</script>

<CardPlaceholder />
<CardPlaceholder size='md' class='mt-8'/>
<CardPlaceholder size='lg' class='mt-8'/>
<CardPlaceholder size='xl' class='mt-8'/>
<CardPlaceholder size='xxl' class='mt-8'/>

Widget placeholder #

  Edit on GitHub
Loading...
  • Svelte
<script>
  import { WidgetPlaceholder } from 'flowbite-svelte'
</script>

<WidgetPlaceholder />

List placeholder #

  Edit on GitHub
Loading...
  • Svelte
<script>
  import { ListPlaceholder } from 'flowbite-svelte'
</script>

<ListPlaceholder />

Testimonial placeholder #

  Edit on GitHub
Loading...
  • Svelte
<script>
  import { TestimonialPlaceholder } from 'flowbite-svelte'
</script>

<TestimonialPlaceholder />

Props #

The component has the following props, type, and default values. See types page for type information.

CardPlaceholder #

Name Type Default
divClass string 'p-4 rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700'
size keyof Sizes 'sm'

ImagePlaceholder #

Name Type Default
divClass string 'space-y-8 animate-pulse md:space-y-0 md:space-x-8 md:flex md:items-center'
imgHeight string '48'

ListPlaceholder #

Name Type Default
divClass string 'p-4 space-y-4 max-w-md rounded border border-gray-200 divide-y divide-gray-200 shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700'

Skeleton #

Name Type Default
divClass string 'animate-pulse'
size keyof Sizes 'sm'

TestimonialPlaceholder #

Name Type Default
divClass string 'animate-pulse'

TextPlaceholder #

Name Type Default
divClass string 'space-y-2.5 animate-pulse'
size keyof Sizes 'sm'

VideoPlaceholder #

Name Type Default
divClass string 'flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700'
size keyof Sizes 'sm'

WidgetPlaceholder #

Name Type Default
divClass string 'p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700'

References #

Tailwind CSS Skeleton