https://github.com/PaulMaly/svelte-content-loader

Svelte Content Loader for Svelte 3
https://github.com/PaulMaly/svelte-content-loader

Last synced: 3 months ago
JSON representation

Svelte Content Loader for Svelte 3

• Host: GitHub
• URL: https://github.com/PaulMaly/svelte-content-loader
• Owner: PaulMaly
• Created: 2019-01-30T20:15:19.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-02-14T12:48:28.000Z (almost 2 years ago)
• Last Synced: 2024-10-07T13:17:46.342Z (4 months ago)
• Language: Svelte
• Homepage:
• Size: 21.5 KB
• Stars: 155
• Watchers: 4
• Forks: 9
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Svelte Content Loader for Svelte 3

[![NPM version](https://img.shields.io/npm/v/svelte-content-loader.svg?style=flat)](https://www.npmjs.com/package/svelte-content-loader) [![NPM downloads](https://img.shields.io/npm/dm/svelte-content-loader.svg?style=flat)](https://www.npmjs.com/package/svelte-content-loader)

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

![preview](https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif)

## Features

This is a Svelte port for [vue-content-loader](https://github.com/egoist/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](https://unpkg.com/svelte-content-loader/) | [jsDelivr](https://cdn.jsdelivr.net/npm/svelte-content-loader/) (available as `window.ContentLoader`)

## Usage

```html

import ContentLoader from 'svelte-content-loader';

```

### Built-in loaders

```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](./src/ListLoader.svelte) is created.

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

```html

```

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