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 #
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 #
- Svelte
<script>
import { ImagePlaceholder } from 'flowbite-svelte';
</script>
<ImagePlaceholder />
<ImagePlaceholder imgHeight={60} class="mt-8" />Video placeholder #
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 #
- 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 #
- 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 #
- Svelte
<script>
import { WidgetPlaceholder } from 'flowbite-svelte';
</script>
<WidgetPlaceholder />List placeholder #
- Svelte
<script>
import { ListPlaceholder } from 'flowbite-svelte';
</script>
<ListPlaceholder />Testimonial placeholder #
- 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' |