A loading placeholder component that replaces content with a same-shape placeholder.
Indicates loading states while maintaining layout consistency. The skeleton preserves the dimensions and structure of the content it replaces.
Examples
<.skeleton width="48px" height="48px" />
<.skeleton>
<.button>Loading button</.button>
</.skeleton>
<.skeleton loading={false}>
<.text>Actual content</.text>
</.skeleton>
<.skeleton loading={@loading}>
<.text>Dynamic loading state</.text>
</.skeleton>Props
loading- Whether to show skeleton or content (default: true)width- Explicit width (e.g., "100px", "50%")height- Explicit height (e.g., "20px", "2rem")- Plus margin props (m, mx, my, mt, mr, mb, ml) for spacing control
Summary
Functions
Attributes
m(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mx(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.my(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mt(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mr(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mb(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.ml(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.loading(:boolean) - Whether to show skeleton placeholder or actual content. Defaults totrue.width(:string) - Explicit width for the skeleton (e.g., '100px', '50%'). Defaults tonil.height(:string) - Explicit height for the skeleton (e.g., '20px', '2rem'). Defaults tonil.class(:string) - Additional CSS classes to add to the element. Defaults tonil.style(:string) - Defaults to"".- Global attributes are accepted. Global attributes and event handlers. Supports all globals plus:
["id", "aria-label", "aria-labelledby", "aria-describedby"].
Slots
inner_block- Content to show when not loading, or to preserve dimensions when loading.