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

public class | source

SVGLoader

SVGLoader class

Example:

let myLoader = new SVGLoader( {
    containerId: 'my-container-id'
} );

Static Member Summary

Static Public Members
public static get	defaultOptions: Object The default options for settings if there's no settings given to the constructor

Constructor Summary

Public Constructor
public	constructor(options: Object) SVGLoader constructor

Member Summary

Public Members
public get	settings: Object The current settings of the instance

Method Summary

Public Methods
public	hide(): SVGLoader Hide the SVG Element
public	show(): SVGLoader Show the SVG Element
public	toggle(): SVGLoader Hide or show the SVG Element

Private Methods
private	[createAnimateElement](index: int): SVGAnimateElement Create Animate element for a rectangle shape of the svg
private	[createRectangles](): SVGGElement Create rectangle shapes depending on settings
private	[createSVG](): SVGElement Create SVG Element with size properties from settings

Static Public Members

public static get defaultOptions: Object source

The default options for settings if there's no settings given to the constructor

Properties:

Name	Type	Attribute	Description
containerId	string		The id of the element that will contain the SVG element
svgId	string		The id given to the created SVG element
nbRects	int		Number of rectangle shapes in the SVG
margin	int		Margin between the shapes (in px)
fill	string		Color of the shapes in the SVG
size	int		Height and width of each shape (rectangle) of the SVG (in px)
radius	int		Value of the border radius of each rectangle shape of the SVG (in px)
minOpacity	Number		Opacity to give to each shapes at the begin of the animation
maxOpacity	Number		Opacity to give to each shapes at the end of the animation
duration	int		Duration of the animation of each shape from minOpacity to maxOpacity (in ms)

Public Constructors

public constructor(options: Object) source

SVGLoader constructor

Params:

Name	Type	Attribute	Description
options	Object	optional	the settings given to the instance
options.containerId	string	optional default: 'loader-container'	The id of the element that will contain the SVG element
options.svgId	string	optional default: 'loader'	The id given to the created SVG element
options.nbRects	int	optional default: 3	Number of rectangle shapes in the SVG
options.margin	int	optional default: 2	Margin between the shapes (in px)
options.fill	string	optional default: '#000000'	Color of the shapes in the SVG
options.size	int	optional default: 15	Height and width of each shape (rectangle) of the SVG (in px)
options.radius	int	optional default: 2	Value of the border radius of each rectangle shape of the SVG (in px)
options.minOpacity	Number	optional default: 0.25	Opacity to give to each shapes at the begin of the animation
options.maxOpacity	Number	optional default: 0.75	Opacity to give to each shapes at the end of the animation
options.duration	int	optional default: 1000	Duration of the animation of each shape from minOpacity to maxOpacity (in ms)

Public Members

public get settings: Object source

The current settings of the instance

Properties:

Name	Type	Attribute	Description
containerId	string		The id of the element that will contain the SVG element
svgId	string		The id given to the created SVG element
nbRects	int		Number of rectangle shapes in the SVG
margin	int		Margin between the shapes (in px)
fill	string		Color of the shapes in the SVG
size	int		Height and width of each shape (rectangle) of the SVG (in px)
radius	int		Value of the border radius of each rectangle shape of the SVG (in px)
minOpacity	Number		Opacity to give to each shapes at the begin of the animation
maxOpacity	Number		Opacity to give to each shapes at the end of the animation
duration	int		Duration of the animation of each shape from minOpacity to maxOpacity (in ms)

Public Methods

public hide(): SVGLoader source

Hide the SVG Element

Return:

SVGLoader

the current instance

public show(): SVGLoader source

Show the SVG Element

Return:

SVGLoader

the current instance

public toggle(): SVGLoader source

Hide or show the SVG Element

Return:

SVGLoader

the current instance

Private Methods

private [createAnimateElement](index: int): SVGAnimateElement source

Create Animate element for a rectangle shape of the svg

Params:

Name	Type	Attribute	Description
index	int

Return:

SVGAnimateElement

the animate element of a rectangle

private [createRectangles](): SVGGElement source

Create rectangle shapes depending on settings

Return:

SVGGElement

the group element containing all rectangles (SVGRectElement)

private [createSVG](): SVGElement source

Create SVG Element with size properties from settings

Return:

SVGElement

the svg element created