Где я могу найти приличный прозрачный ajax spinner?

Я пытаюсь найти достойный прозрачный ajax spinner, который хорошо выглядит на любом фоне. Я пошел на ajaxload.info и другие различные сайты генераторов, но ни один из них не выглядит хорошо на темном фоне. Кто-нибудь знает, где я могу получить TRANSPARENT spinner?

Ответ 1

Это потому, что для того, чтобы они выглядели хорошо, вам нужна альфа-прозрачность (то есть частичная прозрачность на основе каждого пикселя), формат GIF (единственный распространенный формат анимированного изображения, поддерживаемый в браузерах) поддерживает только двоичную прозрачность (каждый пиксель либо 100% непрозрачный, либо прозрачный).

Единственное решение, которое я разработал для GIF, - это создавать загрузчики "на лету" на основе цвета фона - даже тогда он не будет работать с не сплошными цветами.

Лучшее решение - либо использовать анимацию, которая не требует альфа-прозрачности (на самом деле это один из трех блоков Facebook), либо попробовать один из привлекательных новых CSS3/Javascript/Canvas - фактически перемещая (т.е. вращая) один кадр, это может быть PNG с альфа-прозрачностью.

Ответ 2

Недавно я переключился на спрайты PNG, которые поддерживают прозрачность альфа-канала:

(сгенерировано с помощью http://preloaders.net/)

Даже если они требуют крошечного цикла javascript, который меняет смещение фонового изображения, я нашел их весьма полезными, особенно при отправке (POST) форм на сервер (анимация обычных GIF часто останавливается в этом случае). Кроме того, устаревшие браузеры поддерживают его лучше, чем вращение или рисование пользовательских элементов.

    var counter = 0;
    setInterval(function() {
        var frames=12; var frameWidth = 15;
        var offset=counter * -frameWidth;
        document.getElementById("spinner").style.backgroundPosition=offset + "px 0px";
        counter++; if (counter>=frames) counter =0;
    }, 100);

Пример: http://jsfiddle.net/Ekus/dhRxG/

Ответ 3

Попробуйте использовать http://spiffygif.com

Функция halo, описанная в docs, обеспечивает обходное решение этой проблемы

Ответ 4

Между тем, поскольку поддержка анимации CSS становится все более доступной, здесь представлен внушительный набор из 10 индикаторов загрузки только CSS: http://tobiasahlin.com/spinkit/

Ответ 5

Использовать шрифт.

Код будет выглядеть примерно так, используя CSS для поворота одного символа шрифта:

<i class="icon-spin3 animate-spin"></i>

Откроется Fontello, чтобы получить шрифт "значка". Например, вот некоторые хорошие "спин-способные" символы, предлагаемые в шрифте "Fontelico":

Использование шрифта также позволяет легко установить размер, цвет и прозрачность (это просто CSS). И он отображается как векторный рисунок, поэтому вы всегда будете получать чистые края независимо от размера. Очень приятно.

ps - Одна хорошая вещь о Fontello заключается в том, что он позволяет вам подбирать персонажи, которые вы хотите, а затем загружать zip файл с файлами шрифтов с разделом и css, который вам нужен. Чтобы использовать класс анимации-спина, обязательно включите/используйте файл animation.css.