VueJs content loading placeholders

2019-08-01T18:16:53.000Z

Vue Content Loading is a component to build or use placeholder/presets for your content.

Installation is really simple with just few steps & ready to make nice preset on your existing components.

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

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

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

It is really easy to build your own custom presets, like:

<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>

Built in Presets

There are some built in presets with this package.

Facebook
Instagram
Code
List
Bullet List
Twitch
Table

Home Articles About