Zero byte - Loading motion generator

Zero byte graciful and dynamic loading/waiting motion generator for HTML by jQuery. Inspired by an engineer from an engineer, check the following link to know how this plugin emulating the infinite type of motions

Features

• No images, no external CSS
• Get dynamic symmetrical motions with cool patterns that inspired by: Lissajous patterns in Oscilloscope
• Require jQuery only
• Highly configurable
• Resolution independent
• Uses "requestAnimationFrame" animations rather than "setInterval". The reasons:.
  • The browser can optimize it, so animations will be smoother
  • Animations in inactive tabs will stop, allowing the CPU to chill
  • More battery-friendly
• Works in all major browsers, including IE6
• GPLv2 License

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: itechflare.com

1. INCLUDE JS FILES

<script language="javascript" type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script language="javascript" type="text/javascript" src="js/swirly.js" ></script>

2. HTML

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

3. JAVASCRIPT

// Setup your options, which can be generated from the demo shown above
options = {
	phaseShift:90,
	swirlySize:28,
	reverseX:-1,
	reverseY:-1,
	initialX:65,
	initialY:65,
	frequencyX:2100,
	frequencyY:2240,
	offset:10,
	scale: 40,
	colors:['red','green'] // Customize colors of the two swirlies
};
 
// Execute swirly on the specified element
var interval = $("#your-target-div").swirly(options);

Remove or Hide

// To hide and show use the regular jquery toggle
$("#your-target-div").toggle();
 
// To completely remove the swirly loading motion
$("#your-target-div").remove(interval, $("#your-target-div"));