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
    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 and out, which is useful for visualizing the POST and GET 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.
Article based on information from habrahabr.ru

Комментарии

Популярные сообщения из этого блога

ODBC Firebird, Postgresql, executing queries in Powershell

garage48 for the first time in Kiev!

The Ministry of communications wants to ban phones without GLONASS