SVG Loader ES6

A class to create customizable SVG loader with Vanilla ES6.

# Yarn
yarn add --exact svg-loader-es6

# NPM
npm install --save --save-exact svg-loader-es6

Somewhere in your document:

<div id="your-container-id" />

Then in your javascript :

import { SVGLoader } from 'svg-loader-es6';

new SVGLoader( {
  containerId: 'your-container-id'
} )

The constructor can accept more keys in the object as parameters.

Option	Type	Default	Description
containerId	String	"loader-container"	Required - The id of the element that will contain the SVG element
svgId	String	"loader"	The id given to the created SVG element
nbRects	int	3	Number of rectangle shapes in the SVG
margin	int	2	Margin between the shapes (in px)
fill	String (Hex, RGB, RGBA)	"#000000"	Color of the shapes in the SVG
size	int	15	Height and width of each shape (rectangle) of the SVG (in px)
radius	int	2	Value of the border radius of each rectangle shape of the SVG (in px)
minOpacity	Number	0.25	Opacity to give to each shapes at the begin of the animation
maxOpacity	Number	0.75	Opacity to give to each shapes at the end of the animation
duration	int	1000	Duration of the animation of each shape from minOpacity to maxOpacity (in ms)

Property	Type	Description
settings	Object	The current options of the SVGLoader instance (read-only)
defaultOptions	Object	The default options for settings if there's no settings given to the constructor. This is a static method, so call it as follows: `SVGLoader.defaultProperties`

Property	Parameters	Default	Description
toggle	-	-	Hide or show the SVG Element
show	-	-	Show the SVG Element
hide	-	-	Hide the SVG Element
destroy	-	-	Remove the SVG element from DOM and delete all properties or listeners