Svelte Skeleton - Flowbite

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 #

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

Default skeleton #

<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 #

<script>
  import { ImagePlaceholder } from 'flowbite-svelte';
</script>

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

Video placeholder #

<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 #

<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 #

<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 #

<script>
  import { WidgetPlaceholder } from 'flowbite-svelte';
</script>

<WidgetPlaceholder />

List placeholder #

<script>
  import { ListPlaceholder } from 'flowbite-svelte';
</script>

<ListPlaceholder />

Testimonial placeholder #

<script>
  import { TestimonialPlaceholder } from 'flowbite-svelte';
</script>

<TestimonialPlaceholder />

Component data #

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

CardPlaceholder #

• Use the class prop to overwrite divClass.

Props

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 #

• Use the class prop to overwrite divClass.

Props

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 #

• Use the class prop to overwrite divClass.

Props

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 #

• Use the class prop to overwrite divClass.

Props

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

TestimonialPlaceholder #

• Use the class prop to overwrite divClass.

Props

Name	Type	Default
divClass	string	'animate-pulse'

TextPlaceholder #

• Use the class prop to overwrite divClass.

Props

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

VideoPlaceholder #

• Use the class prop to overwrite divClass.

Props

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 #

• Use the class prop to overwrite divClass.

Props

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 #

• Flowbite Skeleton