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, heading, 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 />

Image placeholder #

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

<ImagePlaceholder />

Video placeholder #

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

<VideoPlaceholder />

Text placeholder #

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

<TextPlaceholder />

Card placeholder #

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

<CardPlaceholder />

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

Props #

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

ListPlaceholder

Skeleton

TestimonialPlaceholder

TextPlaceholder

WidgetPlaceholder

References #

Tailwind CSS Skeleton