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
CardPlaceholder: View Source Code
ImagePlaceholder: View Source Code
ListPlaceholder: View Source Code
TestimonialPlaceholder: View Source Code
TextPlaceholder: View Source Code
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 #
Loading...
<script> import { Skeleton } from 'flowbite-svelte' </script> <Skeleton />
Image placeholder #
<script> import { ImagePlaceholder } from 'flowbite-svelte' </script> <ImagePlaceholder />
Video placeholder #
Loading...
<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
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 | 'max-w-sm animate-pulse' |
TestimonialPlaceholder
Name | Type | Default |
---|---|---|
divClass | string | 'animate-pulse' |
TextPlaceholder
Name | Type | Default |
---|---|---|
divClass | string | 'space-y-2.5 animate-pulse max-w-lg' |
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' |