The <luna-skeleton> component displays loading placeholders with sheen and pulse animation effects.
Paths
/lunadom/components/skeleton/skeleton.js REQUIRED
Sheen Effect (Card Example)
Custom Shapes (Pulse)
Customization
Attributes
variant - Skeleton shape (text, avatar, rect)
effect - Animation effect (sheen, pulse)
CSS Variables
--luna-skeleton-bg - The background color of the skeleton.
--luna-skeleton-accent - The color of the animation effect (sheen).
--luna-skeleton-speed - The duration of the animation cycle.
--luna-skeleton-radius - The border radius of the skeleton.
--luna-skeleton-clip-path - An optional clip-path to apply to the skeleton.
Example Code
<!-- Sheen Effect Card -->
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
<luna-skeleton
variant="avatar"
effect="sheen"
>
</luna-skeleton>
<div style="flex: 1;">
<luna-skeleton
variant="text"
effect="sheen"
style="width: 60%;"
>
</luna-skeleton>
<luna-skeleton
variant="text"
effect="sheen"
style="width: 40%;"
>
</luna-skeleton>
</div>
</div>
<luna-skeleton
variant="rect"
effect="sheen"
style="height: 150px; border-radius: 0.5rem;"
>
</luna-skeleton>
<!-- Custom Shapes with Pulse -->
<luna-skeleton
effect="pulse"
style="width: 64px; height: 64px; --luna-skeleton-radius: 0;"
>
</luna-skeleton>
<luna-skeleton
effect="pulse"
style="
width: 64px;
height: 64px;
--luna-skeleton-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"
>
</luna-skeleton>
<luna-skeleton
effect="pulse"
style="
width: 100px;
height: 32px;
--luna-skeleton-radius: 999px;"
>
</luna-skeleton>