Animated Skeleton Loader In Pure JavaScript

Preview:

Description:

A JavaScript library that helps you create a responsive, animated, customizable skeleton loader (also known as a content placeholder) for any content that is loading.

How to use it:

1. Insert the index.js into the HTML page.

<script src="index.js"></script>

2. Create an empty container to place the skeleton loader.

<div id="loader"></div>

3. Create skeleton loaders as follows:

new Loader('loader').render([
    // avatar shape: round, line, drawline
    ['round'], 
    // number of text lines
    ['line*3', 
    {
      // styles
      style: [{
        borderRadius: "5px"
      }, {
        borderRadius: "5px",
        width: '60%'
      }]
    }]
    ], {
      // number of loaders
      numbers: 2,
      // global styles
      parentStyle: {
          height: "50px",
          width: "80%"
      },
      style: {
          width: "100%"
      }
    }
);