components
Tailwind CSS Skeleton
Use FlyonUI's skeleton component with Tailwind CSS to show loading states, enhancing UX in your web applications.
Apply the skeleton
component class to any markup to showcase it’s structure.
<div class="skeleton h-32 w-32"></div>
Apply the skeleton-animated
modifier class to any markup to showcase it’s structure with loading animation.
<div class="skeleton skeleton-animated h-32 w-32"></div>
Apply the skeleton-striped
modifier class to any element to display its structure with a striped skeleton effect.
<div class="skeleton-striped h-32 w-full border-base-content/20 rounded-box border"></div>
Add the animate-pulse
animation class to any markup to display its structure with an active animation. For additional options, refer to the TailwindCSS animation documentation.
<div class="skeleton h-32 w-32 animate-pulse"></div>
Utilize the provided example to present a skeleton featuring a circular shape and content.
<div class="flex w-52 flex-col gap-4">
<div class="flex items-center gap-4">
<div class="skeleton h-16 w-16 shrink-0 rounded-full"></div>
<div class="flex flex-col gap-4">
<div class="skeleton h-4 w-20"></div>
<div class="skeleton h-4 w-28"></div>
</div>
</div>
<div class="skeleton h-32 w-full"></div>
</div>
Utilize the provided example to present a skeleton featuring a Rectangular shape and content with loading animation.
<div class="flex w-52 flex-col gap-4">
<div class="skeleton skeleton-animated h-32 w-full"></div>
<div class="skeleton skeleton-animated h-4 w-28"></div>
<div class="skeleton skeleton-animated h-4 w-full"></div>
<div class="skeleton skeleton-animated h-4 w-full"></div>
</div>