e8-content-loader
Updated on Sep 18, 2025 9 minutes to readA highly customizable SVG content loader component for creating skeleton screens with various placeholder shapes and animations.
Overview
e8-content-loader is used to display placeholder content while the actual data is loading.
It supports multiple preset types including bulletList, list, code, facebook, instagram, and custom.
If type is not specified (empty string), a simple rectangular placeholder is rendered.
You can control the width, height, viewBox, and aspect ratio, and optionally provide custom SVG content via the default slot.
Animated gradients simulate loading progress, giving users visual feedback before content is available.
<e8-content-loader
type="bulletList"
width="300"
height="120"
:speed="1.5"
>
</e8-content-loader>
<e8-content-loader
type="facebook"
width="400"
height="160"
>
</e8-content-loader>
<e8-content-loader
type="custom"
width="400"
height="150"
>
<circle
cx="50"
cy="50"
r="30"
/>
<rect
x="100"
y="40"
rx="5"
ry="5"
width="200"
height="20"
/>
</e8-content-loader>
<e8-content-loader
width="300"
height="100"
>
<!-- renders a simple rectangle because type is not specified -->
</e8-content-loader>Properties
| Property | Description | Type | Default |
|---|---|---|---|
| height | Height of the SVG loader. | number | string | — |
| preserve-aspect-ratio | Sets the SVG preserveAspectRatio attribute. | string | 'xMidYMid meet' |
| type | Predefined skeleton type. | E8ContentLoaderTypes | '' |
| view-box-height | Height of the SVG viewBox. | number | string | 130 |
| view-box-width | Width of the SVG viewBox. | number | string | 400 |
| width | Width of the SVG loader. | number | string | — |
Slots
| Slot | Description |
|---|---|
| default | Slot for providing custom SVG content. Only used if type="custom". |