MooTools Cursor Loader
The MooTools Cursor Loader offers an elegant loading animation that follows the mouse when needed. By absolutely positioning a loading icon animation and using fade in and fade out effects, the loading animation can be very handy for AJAX-related activity.
Last Updated
This page was last updated on Match 17th 2011 and was published on Feb 1st 2011.
Table of Contents
How it Works
The plugin works by absolutely positioning a loading animation nested within a transparent DIV tag. When the loading animation is visible it follows the mouse with a desired offset and can be animated to fade in or fade out or hide right away. It is up to the developer to tell the Cursor Loader when to show and hide itself and when to fade in or fade out the loader.
Why use it?
The plugin is useful for websites that contain lots of AJAX operations. To have an AJAX event occur, the user must be informed that the website is loading something in the background. The MooTools Cursor Loader plugin does just that by providing a subtle loading animation that follows the mouse during the loading operation.
Requirements
- MooTools Core 1.2 or 1.3 (also works in compatibility mode).
- A loading animation graphic.
Browser Support
The plugin works in all browsers. However, IE6, IE7 and IE8 all suffer from lack of support for the CSS opacity filter, thus their proprietary alpha filter does a poor job of applying the transparency filters for images. This issue is mentioned in the issues section.
Usage
To use the Cursor Loader, just include the MooTools core and the CursorLoader JavaScript files and then apply the code where needed:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="cursorloader.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
//setup the loader
CursorLoader.init();
//show the loader
CursorLoader.show();
//hide the loader
CursorLoader.hide();
//fade in the loader
CursorLoader.reveal();
//fade out the loader
CursorLoader.dissolve();
});
</script>
Issues
For all non-IE browsers, there are no known issues. The loading animation movement might lag a bit depending on how heavy the animation graphic is on CPU, and this is also dependant on the machine that is rendering it. Some browsers might do a better job of rendering the animation, but it all should work fine.
The Internet Explorer browsers are a different animal. All three (IE6,IE7 and IE8) all do not support the CSS opacity property. Therefore the opacity animation is dependent on the MS alpha filters which do a horrible job of setting the transparency for transparent PNG images. Therefore, IE users will see a darkened stroke wherever the transparent area of the PNG is for the duration of the fade out effect. When the image is fully opaque (opacity=1) then there will be no darkened areas.
Demos
Yearofmoo.com actually uses the plugin across the website. The two following links are used to control the loader:
Download
The cursorloader.js files can be found on github
Contact
Any issues or questions can be posted on the issue tracking page found on github