Vue Content Loading

Vue component to easily build SVG loading cards like Facebook

Installation

npm install vue-content-loading --save

Usage

Firstly, import it:

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

Then define it as a component

<script>
    export default {
        components: {
            VclFacebook,
            VclInstagram,
        },
    };
</script>

Now you can use it just like you use any other vue component

<template>
    <vcl-facebook></vcl-facebook>
    <vcl-instagram></vcl-instagram>
</template>

Custom Preset

It's really simple to build a preset, you only need to know the basics of SVG

<script>
    import VueContentLoading from 'vue-content-loading';

    export default {
        components: {
            VueContentLoading,
        },
    };
</script>

<template>
    <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" />
    </vue-content-loading>
</template>