Django Skeleton Component

Skeleton renders grey placeholder shapes that approximate the dimensions of content yet to load. Use width, height, and shape props to match the real layout so no shift occurs when data arrives.

Basic Skeleton

Preview

Code

<div class="flex flex-col gap-4 w-52">
  <c-lb.skeleton class="h-32 w-full" />
  <c-lb.skeleton class="h-4 w-28" />
  <c-lb.skeleton class="h-4 w-full" />
  <c-lb.skeleton class="h-4 w-full" />
</div>

With Circle

Preview

Code

<div class="flex w-52 flex-col gap-4">
  <div class="flex items-center gap-4">
    <c-lb.skeleton class="h-16 w-16 shrink-0 rounded-full" />
    <div class="flex flex-col gap-4">
      <c-lb.skeleton class="h-4 w-20" />
      <c-lb.skeleton class="h-4 w-28" />
    </div>
  </div>
  <c-lb.skeleton class="h-32 w-full" />
</div>

Text Animation

Preview

Loading content...

Code

<c-lb.skeleton as="span" text>Loading content...</c-lb.skeleton>

API Reference

`c-lb.skeleton`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply (e.g., dimensions like 'h-32 w-32')
as	div span	`div`	No	HTML element to render as
text	boolean	`False`	No	Use text color animation instead of background

Slot Name	Description
default	Optional content (used with skeleton-text for text placeholders)