Mootools plugin to animate AJAX requests without gifs
I Wanted to somehow make the animation perform an ajax request on pure html+css and without gifs. And made a plugin for Mootools that allows adding one Javascript file to different in size, background and the type of the animated icons.
Pros:
the
And cons:
the
And all the rest, as they say, better to see once.
Demo here: http://lavmax.github.com/MUX.Loaders
The source code and documentation here: https://github.com/lavmax/MUX.Loaders
Example usage:
Who liked use, who did not like to scold constructively please.
Article based on information from habrahabr.ru
Pros:
the
-
the
- Lungs. Single element weighs more GIF'a, but you can use it repeatedly stylizer under a different part of the website/application. the
- Easily connected (see example below) the
- cross-browser. Unlike super pretty but CSS3 elements like these has been tested on IE 7+, Firefos 3+, Opera 11, Safari, Chrome, Mobile Safari 4+ and Android 2.2. Most likely will work on IE6, Opera 10 and older versions of Safari and Chrome, but not tested. the
- Single file for all animated icons of a site, not a separate gif for every situation. the
- Base class you can extend writing your own animations. the
- Is not directly related to technology, but also rarely met, so add some animations have the mode
in
andout
, which is useful for visualizing thePOST
andGET
requests, respectively.
the - for some reason I do not like animated gifs
And cons:
the
-
the
- In IE 9, the elements still left square. Though the border-radius in it and supported, but there is a bug (or feature) associated with the fill, which immediately bypass failed. Can someone tell me how to do it. the
- could Theoretically slow down on slower machines on the old browser under load. In tests it did not appear, but life, as we know from tests is different. Tested on a weak netbook in IE 8 mode and IE 7 on my virtual machine — less, there was nothing for tests. the
- I'm Sure the comments will get...
And all the rest, as they say, better to see once.
Demo here: http://lavmax.github.com/MUX.Loaders
The source code and documentation here: https://github.com/lavmax/MUX.Loaders
Example usage:
// Create a simple element with no parameters
var loader = new MUX.Loader.Bar();
loader.start(); // Starts the animation and shows the element
loader.stop(); // Stops the animation and hides the element
// You can also use the start() and stop() directly to the html element
$('my-loaders-id').start();
$('my-loaders-id').stop();
// Get html element by using $
$(loader).inject(document.body);
// this is the same as
loader.elem.inject(document.body);
Who liked use, who did not like to scold constructively please.
Комментарии
Отправить комментарий