README

content-load-animation

A content placeholder component with loading animation built on Vue.js. Width and height of the animation area are configurable, and it will automatically adjust the layout design.

example1

Installation

npm install content-load-animation --save

Usage

JavaScript:

import Vue from 'vue'
import LoadAnimation from 'content-load-animation'

new Vue({
  el: '#element-to-load',
  components: {
    LoadAnimation    
  }
})

HTML:

<div id="element-to-load">
  <load-animation :width=300 :height=150 :title=true :image=true :circle-image=false></load-animation>
</div>

Note according to https://vuejs.org/v2/guide/components.html#Component-Naming-Conventions, you have to use kebab-case for HTML tag name. (In the above example, LoadAnimation => load-animation)

Use in Browser

This component is built as UMD compliant, so it can also be loaded directly in browser, either by <scirpt> tag, or AMD loader such as RequireJS.

If loaded from <script>, it will be a global variable:

window.LoadAnimation

If loaded by AMD:

require(["vue", "LoadAnimation"], function(Vue, LoadAnimation) {
  // register component.
});

Config Attributes

Attribute	Description	Type
width	Width (in pixel) of the animation area.	int
height	Height (in pixel) of the animation area.	int
title	Has animated title lines on top. Title lines are slightly darker than content lines.	bool
image	Has animated profile image on top-left.	bool
circle-image	Use circle profile image instead of a square. Only effective when "image" attribute is true.	bool

License

MIT License

Usage no npm install needed!