Swirly.js

Dynamic HTML (Waiting / Loading) motion, made purely of jQuery code

This is an experimental project.

<script language="javascript" type="text/javascript" src="https://raw.githubusercontent.com/aelbuni/swirly/master/js/swirly.min.js" ></script>

swirly.js swirly.min.js (1.8 Kb)

Swirly Generator

Step 1 (Customize your motion)

Reverse X
Reverse Y
Frequency X
Frequency Y
Initial X
Initial Y
Scale
Size
Offset
Phase
Stop
Play
Remove

Step 2 (Observe)

Step 3 (Copy your customized motion script)

options = {
	phaseShift:{{phase}},
	swirlySize:{{size}},
	reverseX:{{reverseX}},
	reverseY:{{reverseY}},
	initialX:{{Initial1}},
	initialY:{{Initial2}},
	frequencyX:{{frequency1}},
	frequencyY:{{frequency2}},
	offset:{{offset}},
	scale: {{scale}},
	colors:['red','green']
};

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

Usage

After imcluding jQuery and Swirly java scripts int your website.

// 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

You can test the effect of stop, play and remove using the button shown above at the swirly generator

// 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"));

Positioning

The swirly loading motion is relatively positioned at 0,0 of its offset parent. However, you can always use "initialX" and "initialY" to adjust the motion positioning.

Supported Browsers

Contact

Abdulrhman Mohamed Samir Elbuni
If you encounter any problems, please use the GitHub issue tracker. For updates follow iTechFlare on Twitter. If you like swirly.js and you want to use it in the wild, let me know.