Svelte Content Loader for Svelte 3

 

SVG component to create placeholder loading, like Facebook cards loading.

!preview

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

``bash
npm i svelte-content-loader --save
`

`bash
yarn add svelte-content-loader
`

CDN: UNPKG | jsDelivr (available as window.ContentLoader)

Usage

`html



`

$3

`js
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:

`html








`

This is also how ListLoader is created.

If you are not using using es6, instead of importing add

`html

`

just before closing body tag.

API

$3

|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