Home

Awesome

Svelte Content Loader for Svelte 3

NPM version NPM downloads

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

preview

Features

This is a Svelte port for vue-content-loader.

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

NameTypeDefaultDescription
widthnumber400
heightnumber130
speednumber2
preserveAspectRatiostring'xMidYMid meet'
primaryColorstring'#f9f9f9'
secondaryColorstring'#ecebeb'
uniqueKeystringrandomId()Unique ID, you need to make it consistent for SSR
animatebooleantrue
baseUrlstringempty stringRequired if you're using <base url="/" /> in your <head/>. Defaults to an empty string. This prop is common used as: <ContentLoader bind:baseUrl={pathname} /> which will fill the SVG attribute with the relative path.
primaryOpacitynumber1Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari
secondaryOpacitynumber1Background 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