Swirly.js

Dynamic Zero byte HTML (Waiting / Loading) motion, made by jQuery :)

This is a fun project. However, I labeled this plugin as zero byte plugin, because of two reasons: 1.You can generate unlimited motions with it. 2.You can link to the library using this javascript line without having to store it into your website (I know this is trivial):
<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)

Loading

Step 3 (Copy your customized motion script)

  1. options = {
  2. phaseShift:{{phase}},
  3. swirlySize:{{size}},
  4. reverseX:{{reverseX}},
  5. reverseY:{{reverseY}},
  6. initialX:{{Initial1}},
  7. initialY:{{Initial2}},
  8. frequencyX:{{frequency1}},
  9. frequencyY:{{frequency2}},
  10. offset:{{offset}},
  11. scale: {{scale}},
  12. colors:['red','green']
  13. };


Loading

Features

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


developer image

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.