lavmax May 11 2011 at 09:46

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

2 min

3.5K

Захотелось как-то сделать анимацию выполнения 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:

Hubs:

MooTools