
Плюсы:
- Легкие. Отдельно взятый элемент весит не больше 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);
Кому понравилось пользуйтесь, кому не понравилось ругайте конструктивно пожалуйста.