Mootools plugin for animating AJAX requests without gifs
I wanted to somehow make an animation of the execution of ajax requests on pure html + css and completely without gifs. And he made a plugin for Mootools, which allows you to get animated icons of different sizes, backgrounds, and types when adding a single Javascript file. Pros:
- Lungs. A single element weighs no more than a gif, and you can use it repeatedly styling to different fragments of the site / application.
- Easy to connect (see example below)
- Cross-browser. Unlike super-nice but CSS3-like elements, these were tested on IE 7+, Firefos 3+, Opera 11, Safari, Chrome, Mobile Safari 4+ and Android 2.2. Most likely they will work on IE6, Opera 10 and older versions of Safari and Chrome, but have not been tested.
- One file for all animated website icons, and not a separate gif for each situation.
- The base class can be expanded by adding your own animations.
- This is not directly related to technology, but it is also rarely seen, so I’ll add - some animations have a mode
inandoutthat is convenient for visualizationPOSTandGETqueries, respectively. - For some reason, since childhood, I don’t like animated gifs
And cons:
- In IE 9, elements are still left square. Although border-radius is supported in it, there is a bug (or feature) associated with the fill, which could not be bypassed right away. Can someone tell me how to do this.
- Theoretically, it can slow down on weak machines on an old browser under load. This did not appear in tests, but life, as you know, differs from tests. It was tested on a weak netbook in IE 8 in IE 7 mode and on my virtual machine - nothing weaker for tests was found.
- Surely in the comments still typed ...
And everything else, as they say, is better to see once.
Demo here: http://lavmax.github.com/MUX.Loaders
Sources and documentation here: https://github.com/lavmax/MUX.Loaders
Example of use: Who liked it, who didn’t like it, please use a constructive curse.
// Создаем простейший элемент без параметров
var loader = new MUX.Loader.Bar();
loader.start(); // Запускает анимацию и показывает элемент
loader.stop(); // Останавливает анимацию и скрывает элемент
// Можно так же применять start() и stop() непосредственно к html-элементу
$('my-loaders-id').start();
$('my-loaders-id').stop();
// Можно получить html-элемент с помощью $
$(loader).inject(document.body);
// это тоже самое, что
loader.elem.inject(document.body);