View Source SaladUI.Skeleton (SaladUI v1.0.0-beta.1)
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 tonil
.- Global attributes are accepted.