@findify/skeleton-generator

skeleton-generator

Automatically generates beautiful SVG content loader with animations

Browser

(() => {
  var script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/gh/findify/skeleton-generator@master/dist/skeleton-generator.umd.js';
  document.head.appendChild(script);
  script.onload = function() {
    console.log( // Array of SVG's
      generatePlaceholder({
          container: '.container--page',
          text: '.components--text',
          rect: '.components--cards--product__image, .components--button',
          group: '.components-facets__facet, .components--cards--product',
          identifyGroup: (node) => node.className
      })
    )
  };
})()

Npm/Yarn

yarn add @findify/skeleton-generator

import generatePlaceholder from '@findify/skeleton-generator';

const placeholders = generatePlaceholder();

About

This library is similar to react-content-loader but generates paths based on actual DOM. It works perfectly with frameworks where you have specific CSS selectors for text, images and other blocks. Also, this script allows you to reduce size of svg by using group for repeating components, where sample of groups is its first member

Properties

Prop Name	Default	Description
container	[data-draw=\'container\']	Container selector - viewbox for svg. All sizes and elements position will be calculated relative to this container. The generator returns array of SVG strings for each container on the page
group	[data-draw=\'group\']	Repeating items could be combined in group to reduce size of SVG. The sample of group is its first representative
text	[data-draw=\'text\']	Text nodes selector calculates number of lines and its width
rect	[data-draw=\'rect\']	Simple rect node - could be any element, generator will calculate its width and height
border	[data-draw=\'border\']	Draws 4 rectangles around element with 5px width
circe	[data-draw=\'circle\']	Just simple circle, might be useful for avatars
identifyGroup	n => node.dataset['draw-id']	Function to identify what group the element is belong to. Provides DOMNode and waits for unique string ID

Development

yarn # Install dependencies
yarn build # Build library
yarn dev # Run dev server

License (MIT)