Tailwind CSS Skeleton
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...
<Skeleton />
Image placeholder
<ImagePlaceholder />
Video placeholder
Loading...
<VideoPlaceholder />
Text placeholder
<TextPlaceholder />
Card placeholder
<CardPlaceholder />
Widget placeholder
<WidgetPlaceholder />
List placeholder
<ListPlaceholder />
Testimonial placeholder
<TestimonialPlaceholder />