Больная тема! Когда я, как и вы, использовал анимированный ГИФ, я придумал подкладывать под крутилку круглую плашку нужного цвета. Выглядело лучше, чем у вас:

Потом в Фотораме мне захотелось уйти от этой блямбы, и я нарисовал ПНГ-спрайт 12-кадровой крутилки на прозрачном фоне, который анимируется скриптом.

Но и это полумера. Хочется свободно менять цвет и фон крутилки, количество лепестков и размер. Руками это делать слишком долго, а на прелоадеры, генерируемые различными онлайн-сервисами, смотреть больно.

Я решил написать свой инструмент для работы с прелоадерами. Встречайте «Крутилку»:

<script src="jquery-1.7.1.min.js"></script>
<script src="krutilka.js"></script>

<script>
  $(function(){
    $('#krutilka').krutilka();
  });
</script>

<span id="krutilka"></span>

Плагин использует СВГ. Весит 1 КБ в сжатом виде. Рисует такую крутилку, какую пожелаете, имеет небольшое АПИ для скрытия прелоадера и изменения скорости на лету:

Исходные опции «Крутилки» такие:

var options = {
  size: 32, // Ширина и высота блока с крутилкой
  petals: 15, // Сколько лепестков у крутилки
  petalWidth: 2, // Толщина лепестка
  petalLength: 8, // Длина лепестка
  petalOffset: 1, // Внутреннее поле блока с крутилкой
  time: 1000, // Время прохода круга в миллисекундах
  color: '#808080', // Цвет лепестков, можно RGBA
  background: 'none' // Фон крутилки
};

Чтобы остановить и скрыть запущенную крутилку, пишите так:

$('#krutilka').trigger('hide');

Снова показать:

$('#krutilka').trigger('show');

Если нужно изменить время прохода анимации, укажите новое значение в миллисекундах вторым параметром:

$('#krutilka').trigger('show', 1500);

В старых браузерах без СВГ пока ничего не показывается.

Крутите на здоровье:

• krutilka.zip 36 КБ
  с примерами кода