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.

  • 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 inand outthat is convenient for visualization POSTand GETqueries, 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:
Sources and documentation here:

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-элементу

// Можно получить html-элемент с помощью $
// это тоже самое, что

Also popular now: