Svelte Content Loader for Svelte 3
SVG component to create placeholder loading, like Facebook cards loading.
Features
This is a Svelte port for vue-content-loader.
- Completely customizable: you can change the colors, speed and sizes.
- You can use it right now: there are a lot of presets already.
- Performance:
- Tree-shakable and highly optimized bundle.
- Pure SVG, so it's works without any javascript, canvas, etc.
- Vanilla JS components.
Install
npm i svelte-content-loader --save
yarn add svelte-content-loader
CDN: UNPKG | jsDelivr (available as window.ContentLoader
)
Usage
Built-in loaders
ContentLoader
is a meta loader while other loaders are just higher-order components of it. By default ContentLoader
only displays a simple rectangle, here's how you can use it to create custom loaders:
This is also how ListLoader is created.
If you are not using using es6, instead of importing add
just before closing body tag.
API
Props
Name | Type | Default | Description |
---|---|---|---|
width | number | 400 |
|
height | number | 130 |
|
speed | number | 2 |
|
preserveAspectRatio | string | 'xMidYMid meet' |
|
primaryColor | string | '#f9f9f9' |
|
secondaryColor | string | '#ecebeb' |
|
uniqueKey | string | randomId() |
Unique ID, you need to make it consistent for SSR |
animate | boolean | true |
|
baseUrl | string | empty string | Required if you're using in your . Defaults to an empty string. This prop is common used as: which will fill the SVG attribute with the relative path. |
primaryOpacity | number | 1 |
Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari |
secondaryOpacity | number | 1 |
Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari |
Credits
This is basically a Svelte port for vue-content-loader.
License
MIT © PaulMaly