/svgloader

Animated SVG Sequence

Primary LanguageJavaScript

Animated SVG Sequence

Animated SVG sequence for loaders. Draws and animates between multiple SVG files to create a sequence of loading image. Built on top of vivus.js and jQuery.

Example

Demo: http://brettgregson.com/dev/svg/

Usage:

<script src="jquery.min.js"></script>
<script src="vivus.min.js"></script>
<script src="sveegee.js"></script>
<div id="loader" style="width:80px; height: 80px;"></div>
// create an array of resources that we are going to use
var resources = [
	"resources/0.svg",
	"resources/1.svg",
	"resources/2.svg",
	"resources/3.svg",
	"resources/4.svg",
	"resources/5.svg",
	"resources/6.svg",			
	"resources/7.svg",
	"resources/8.svg",
	"resources/9.svg",
];

// configure the plugin
var params = {
	resources		: resources,
	speed			: 50,
	displayTime		: 500,
	fadeTime		: 250,
	shuffleArray	: true,
}

// assign to element
var sveegee = $("#loader").sveegee(params);
Property Description Default
resources Array of SVG paths []
speed The speed of the animation 50
displayTime Time in MS that completed SVG is diplayed 500
fadeTime Time in MS of fadeOut effect 250
shuffleArray Bool, should array be shuffled or not false

SVG Properties:

Properties such as stroke thickness, color and linejoin need to be configured per SVG on the SVG file itself, for example:

<svg  stroke="black" stroke-width="5" stroke-linejoin="round"

Methods:

sveegee.stopSVG(500);

Stops the SVG sequence and fades out in specified milliseconds (Default is 500 if not provided)