Mootools plugin for animating AJAX requests without gifs
I wanted to somehow animate the execution of ajax requests on pure html + css and completely without gifs. And made a plugin for Mootools, which allows you to get different icons in size, background and type when adding a single Javascript file.
Pros:
Lungs. A single element weighs no more than gif, and you can use it repeatedly by styling for different fragments of a site / application.
Easy to connect (see example below)
Crossbrowser. Unlike the super-beautiful CSS3, these elements were 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 has not been tested.
One file for all animated site icons, not a separate gif for each situation.
The base class can be extended by adding their own animations.
This is not directly related to technology, but I also rarely met it, so I’ll add - some animations have an in and out mode, which is convenient for rendering POST and GET requests, respectively.
For some reason I don't like animated gifs since childhood.
And cons:
In IE 9, the elements are still square. Although the border-radius is supported in it, but there is a bug (or feature) associated with the fill, which was not immediately possible to bypass. Can someone tell me how this can be done.
Theoretically, it can slow down on weak machines on an old browser under load. In tests, this did not manifest itself, but life, as we know, differs from tests. It was tested on a weak netbook in IE 8 in IE 7 mode and on my virtual machine - nothing was weaker for tests.