vue-content-loader

  

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

!preview

Features

This is a Vue port for react-content-loader.

- Completely customizable: you can change the colors, speed and sizes.
- Create your own loading: use the online tool to create your custom loader easily.
- 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.
- Pure functional components.

Install

⚠️ The latest version is compatible with Vue 3 only. For Vue 2 & Nuxt 2, use vue-content-loader@^0.2 instead.

With npm:

``bash
npm i vue-content-loader
`

Or with yarn:

`bash
yarn add vue-content-loader
`

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

Usage

👀👉 Demo: CodeSandbox

`vue



`

$3

`js
import {
ContentLoader,
FacebookLoader,
CodeLoader,
BulletListLoader,
InstagramLoader,
ListLoader,
} from 'vue-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:

`vue








`

This is also how ListLoader is created.

You can also use the online tool to create shapes for your custom loader.

API

$3

| Prop | Type | Default | Description |
| ------------------- | -------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| width | number, string | | SVG width in pixels without unit |
| height | number, string | | SVG height in pixels without unit |
| viewBox | string | '0 0 ${width ?? 400} ${height ?? 130}' | See SVG viewBox attribute |
| preserveAspectRatio | string | 'xMidYMid meet' | See SVG preserveAspectRatio attribute |
| speed | number | 2 | Animation speed |
| primaryColor | string | '#f9f9f9' | Background color |
| secondaryColor | string | '#ecebeb' | Highlight color |
| 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. Related #14. |
| 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 |

Examples

$3

To create a responsive loader that will follow its parent container width, use only the viewBox attribute to set the ratio:

`vue



`

To create a loader with fixed dimensions, use width and height attributes:

`vue



``

Note: the exact behavior might be different depending on the CSS you apply to SVG elements.

Credits

This is basically a Vue port for react-content-loader.

Thanks to @alidcastano for transferring the package name to me. 😘

License

MIT © EGOIST