11 May 2011

Mootools плагин для анимации AJAX-запросов без gif'ов

MooTools
Захотелось как-то сделать анимацию выполнения ajax-запросов на чистом html+css и совсем без gif'ов. И сделал плагин для Mootools, который позволяет при добавлении одного файла Javascript получить различные по размеру, фону и типу анимированные иконки.

Плюсы:
  • Легкие. Отдельно взятый элемент весит не больше gif'а, а использовать его можно многократно стилизируя под разные фрагменты сайта/приложения.
  • Легко подключаются (см. пример ниже)
  • Кроссбраузерные. В отличие от суперкрасивых но CSS3 подобных элементов эти тестировались на IE 7+, Firefos 3+, Opera 11, Safari, Chrome, Mobile Safari 4+ и Android 2.2. Скорее всего будут работать и на IE6, Opera 10 и старших версиях Safari и Chrome, но не тестировалось.
  • Один файл для всех анимированных иконок сайта, а не отдельный gif на каждую ситуацию.
  • Базовый класс можно расширять дописывая свои анимации.
  • Это не связанно непосредственно с технологией, но тоже редко встречал, поэтому добавлю — некоторые анимации имеют режим in и out, что удобно для визуализации POST и GET запросов соответственно.
  • Я почему-то с детства не люблю анимированные gif'ы

И минусы:
  • В IE 9 элементы все равно оставлены квадратными. Хоть border-radius в нем и поддерживается, но имеет место баг (или фича) связанный с заливкой, который сходу обойти не удалось. Может кто подскажет как это можно сделать.
  • Теоретически может притормаживать на слабых машинах на старом браузере под нагрузкой. В тестах это не проявилось, но жизнь, как известно, от тестов отличается. Тестировалось на слабеньком нетбуке в IE 8 в режиме IE 7 и на моей виртуальной машине — слабее ничего не нашлось для тестов.
  • Наверняка в комментариях еще наберется...

А все остальное, как говорится, лучше один раз увидеть.
Демо здесь: http://lavmax.github.com/MUX.Loaders
Исходники и документация здесь: https://github.com/lavmax/MUX.Loaders

Пример использования:
// Создаем простейший элемент без параметров
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);


Кому понравилось пользуйтесь, кому не понравилось ругайте конструктивно пожалуйста.
Tags:mootoolsajaxанимацияjavascriptcsshtmlпользовательский интерфейсuser interfacegif
Hubs: MooTools
+32
3k 39
Comments 20
Top of the last 24 hours