Skip to content

PaulMaly/svelte-content-loader

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 

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.

  • 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

About

Svelte Content Loader for Svelte 3

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published