svelte-content-loader
v1.1.3
Published
Svelte Content Loader for Svelte 3
Downloads
810
Readme
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
<ContentLoader/>
<script>
import ContentLoader from 'svelte-content-loader';
</script>
Built-in loaders
import {
FacebookLoader,
CodeLoader,
BulletListLoader,
InstagramLoader,
ListLoader
} from 'svelte-content-loader'
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:
<ContentLoader>
<rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
<rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
<rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
<rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
<rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
<rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
</ContentLoader>
This is also how ListLoader is created.
If you are not using using es6, instead of importing add
<script src="/path/to/svelte-content-loader/index.js"></script>
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