Vue Content Loading

Vue component to easily build (or use presets) SVG loading cards Facebook like.


  import { VclFacebook, VclInstagram } from 'vue-content-loading';



You can bind custom attrs to presets too xd

  import VueContentLoading from 'vue-content-loading';

  <vue-content-loading :width="300" :height="100">
    <circle cx="30" cy="30" r="30" />
    <rect x="75" y="13" rx="4" ry="4" width="100" height="15" />
    <rect x="75" y="37" rx="4" ry="4" width="50" height="10" />

The default loading is facebook



Prop Type Default Description
speed Number 2 Animation speed
width Number 400 Width component
height Number 150 Height component
primary String #f0f0f0 SVG Background
secondary String #e0e0e0 Animation color

Color props are required to be HEX with hash prefix.

Props are validate, so it minimize mistakes xd

Supported presets

  • Code (VclCode)
  • List (VclList)
  • Facebook (VclFacebook)
  • Instagram (VclInstagram)


To run for development run

$ npm run dev

This will host the application at localhost:8080

To build for production run

$ npm run build

The above command bundle the app and also features minification to help reduce file size


$ npm run lint

To automatically fix the problems, run

$ npm run lint:fix