fondo - ¿Dónde puedo encontrar un hilandero ajax transparente decente?

loading gif transparent background

Question

Estoy tratando de encontrar un hilandero ajax transparente decente que se vea bien en cualquier fondo. He visitado ajaxload.info y otros sitios de varios generadores, pero ninguno de ellos se ve bien en un fondo oscuro. ¿Alguien sabe donde puedo conseguir un hilandero TRANSPARENTE?

Answer 1

Esto se debe a que para que se vean bien, se necesita transparencia alfa (es decir, transparencia parcial por píxel), el formato GIF (el único formato de imagen animada común admitido en los navegadores) solo admite transparencia binaria (cada píxel es 100). % opaco o transparente).

La única solución que he encontrado para los GIF es generar cargadores sobre la marcha basados ​​en el color de fondo, incluso si no funciona con colores no sólidos.

La mejor solución es usar una animación que no requiera transparencia alfa (los tres bloques de Facebook son un buen ejemplo de esto) o probar uno de los nuevos y sofisticados giros CSS3 / Javascript / Canvas, ya que estos se animan realmente en movimiento ( es decir, girando) un solo cuadro, puede ser un PNG con transparencia alfa.

Answer 2

Mientras tanto, dado que el soporte de animación CSS está cada vez más disponible, aquí hay un impresionante conjunto de 10 indicadores de carga solo para CSS: http://tobiasahlin.com/spinkit/

Answer 3

Recientemente cambié a sprites PNG que admiten la transparencia del canal alfa:

(generado usando http://preloaders.net/ )

A pesar de que requieren un pequeño bucle javascript que cambia el desplazamiento de la imagen de fondo, me parecieron bastante útiles, especialmente al enviar formularios (POST) al servidor (la animación de los GIF normales a menudo se detiene en ese caso). Además, los navegadores heredados lo admiten mejor que rotar o dibujar elementos personalizados.

    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);

Ejemplo: http://jsfiddle.net/Ekus/dhRxG/

Answer 4

Trate de usar http://spiffygif.com

La característica de halo descrita en sus docs proporciona una solución alternativa a este problema

Answer 5

Usa una fuente.

El código se verá algo así, usando CSS para rotar un solo carácter de una fuente:

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

Echa un vistazo a Fontello para obtener una fuente "icono". Por ejemplo, aquí hay algunos buenos caracteres "capaces de girar" que se ofrecen en la fuente "Fontelico":

El uso de una fuente también le permite configurar el tamaño, el color y la transparencia con mucha facilidad (solo es CSS). Y se presenta como un gráfico vectorial, por lo que siempre obtendrá bordes limpios independientemente del tamaño. Muy agradable.

ps: una cosa buena sobre Fontello es que te permite seleccionar los caracteres que deseas y luego descargar un archivo zip que contiene los archivos de fuentes simplificados y el css que necesitas. Para utilizar la clase animate-spin, asegúrese de incluir / usar el archivo animation.css.