loaders - page loader css example

Android Holo cargando spinner en CSS

Question

Necesito saber cómo puedo hacer que el Holo de Android cargue el hilandero en CSS sin imágenes. Lo he intentado, pero no sé cómo puedo hacerlo. Esto es lo que necesito (animado, como en Android):

¿Cómo puedo hacerlo en CSS sin imágenes?

Answer 1

Manifestación

http://jsfiddle.net/7cGc3/4/

Puedo obtener el efecto de giro con CSS puro. Son posibles efectos más avanzados (ver más abajo), pero el factor limitante es que esta técnica se basa en una región de recorte rectangular.

_{Debería ver esto (animado, por supuesto) en Chrome, IE10, FF. IE9 parece correcto pero no animará. Safari necesita una versión ligeramente modificada .}

Caja de arena para efectos más elaborados (solo webkit, más similar a la respuesta aceptada): http://jsfiddle.net/7cGc3/5/

Código

_{Prefijos de proveedores omitidos por brevedad.}

HTML

El HTML es extremadamente simple.

<div class="spinner"></div>

CSS

Las piezas importantes aquí son el radio del borde, el clipping y la animación.

.spinner{
    width: 100px;
    height: 100px;
    border-radius: 54px;
    border: 4px solid #999;
    position: relative;
}

.spinner:after {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    border: 4px solid #fff;
    border-radius: 54px;
    height: 100px;
    width: 100px;
    clip: rect(0px, 60px, 50px, 0px);

    animation: rotate 2s;  
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

Answer 2

Parece que tampoco puedo hacerlo sin imágenes.

Me las arreglé para hacer una verdadera réplica del Holo spinner como se define en AOSP con solo dos imágenes para los gradientes outer e inner . Aquí hay un violín.

El problema es que esas dos imágenes tienen un gradiente "polar": comienzan desde un color a 0 °, que se funde gradualmente en un segundo color al rodear el círculo. Hay un cambio agudo de color en 0 ° donde los dos colores se encuentran. No sé si hay alguna forma de crear tal gradiente en CSS usando solo linear-gradient o radial-gradient .

ACTUALIZACIÓN Me puse a trabajar sin imágenes, yay! Echa un vistazo al violín.

Aproximé cada gradiente polar utilizando dos mitades de un gradiente lineal. Algunas desventajas de este enfoque:

• El desvanecimiento del color no es perfecto. Los colores se desvanecen a lo largo del eje vertical en lugar de a lo largo del ángulo.
• Hay un pequeño fallo en el que las dos mitades se encuentran en la parte inferior, ya que dan colores ligeramente diferentes a puntos en la misma línea horizontal. Esto se hace más notable a medida que aumenta el ancho del trazo del hilandero.

Para pequeños giradores, que es el caso de uso habitual, ¡funciona bien y se ve genial!