View Source SaladUI.Skeleton (SaladUI v1.0.0-beta.3)

Skeleton loading component for showing placeholder content while data is loading.

Skeleton loaders provide visual feedback to users during data loading, improving perceived performance.

Examples:

<.skeleton class="h-4 w-full" />

# Card loading skeleton
<div class="space-y-2">
  <.skeleton class="h-32 w-full rounded-lg" />
  <.skeleton class="h-4 w-2/3" />
  <.skeleton class="h-4 w-full" />
  <.skeleton class="h-4 w-full" />
</div>

# Avatar and text loading skeleton
<div class="flex items-center gap-4">
  <.skeleton class="h-12 w-12 rounded-full" />
  <div class="space-y-2">
    <.skeleton class="h-4 w-32" />
    <.skeleton class="h-4 w-24" />
  </div>
</div>

Summary

Functions

Renders a skeleton loading placeholder.

Functions

Renders a skeleton loading placeholder.

Attributes

  • :class - Additional CSS classes to apply to the skeleton element. Use this to control dimensions (width, height), border radius and other visual aspects.
  • :rest - Additional HTML attributes to apply to the skeleton element.

Examples

<.skeleton class="h-6 w-24" />
<.skeleton class="h-12 w-12 rounded-full" />
<.skeleton class="h-4 w-full max-w-sm" />

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.