Repository files navigation

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

This is a Vue port forreact-content-loader.

• Completely customizable: you can change the colors, speed and sizes.
• Create your own loading: use theonline 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.

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

With npm:

npm i vue-content-loader

Or with yarn:

yarn add vue-content-loader

CDN:UNPKG |jsDelivr (available aswindow.contentLoaders)

👀👉 Demo:CodeSandbox

<template>  <content-loader></content-loader></template><script>import {ContentLoader }from'vue-content-loader'exportdefault {  components: {    ContentLoader,  },}</script>

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 defaultContentLoader only displays a simple rectangle, here's how you can use it to create custom loaders:

<ContentLoader viewBox="0 0 250 110">  <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 howListLoader is created.

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

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

<ContentLoader viewBox="0 0 300 200">  <!-- ... --></ContentLoader>

To create a loader with fixed dimensions, usewidth andheight attributes:

<ContentLoader width="300" height="200">  <!-- ... --></ContentLoader>

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

This is basically a Vue port forreact-content-loader.

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

MIT ©EGOIST