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, images, videos, and more.
Setup #
<script>
import { CardPlaceholder, ImagePlaceholder, ListPlaceholder, Skeleton, TestimonialPlaceholder, TextPlaceholder, VideoPlaceholder, WidgetPlaceholder } from 'flowbite-svelte'
</script>Default skeleton #
Example
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 #
Example
- Svelte
<script>
import { ImagePlaceholder } from 'flowbite-svelte'
</script>
<ImagePlaceholder />
<ImagePlaceholder imgHeight={60} class='mt-8'/>Video placeholder #
Example
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 #
Example
- 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 #
Example
- 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 #
Example
- Svelte
<script>
import { WidgetPlaceholder } from 'flowbite-svelte'
</script>
<WidgetPlaceholder />List placeholder #
Example
- Svelte
<script>
import { ListPlaceholder } from 'flowbite-svelte'
</script>
<ListPlaceholder />Testimonial placeholder #
Example
- 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' |