Barra de progreso indeterminada en HTML + CSS

Me gustaría crear una barra de progreso HTML + CSS indeterminada para que se vea como la de Vista:

Barra de progreso indeterminado de Vista http://www.miximages.com/progress-bar/IC121865.png

Me gustaría:

  1. Ajústelo horizontalmente al ancho de la barra de progreso (se pueden definir el ancho mínimo y máximo)
  2. No use Javascript, sino solo GIF animado
  3. Tener un solo indicador de movimiento en todo el ancho.

¿Alguna sugerencia de cómo hacer esto?

  1. css – ancho: 100%
  2. no Javascript significa que tendrás que hacerlo con html5, que es un poco más complicado. Un GIF animado solo funcionaría si decides hacer que la barra tenga un ancho fijo (de lo contrario, el gif estará sesgado)
  3. Para moverlo: javascript o html5

La forma más fácil: javascript (guste o no …;))

¡NO NO NO! Es posible

Usando el overflow: hidden CSS overflow: hidden y keyframe , puede ser posible.

Para el fotogtwig clave, utilicé desde la left:-120px (ancho del objeto shiny) hacia la left:100%

La estructura que utilicé:

 

La estructura actualizada y compacta usando :before y :after :

 

El degradado, el enmascaramiento, el brillo y todos los efectos cuestan una estructura costosa. Si alguien tiene una idea mejor, por favor hágamelo saber.

En esta fecha, la única solución de webkit (la máscara de elipse para el brillo):

Se agregó la máscara SVG para Firefox y otros navegadores que no admiten -webkit-mask-image : http://jsfiddle.net/danvim/8M24k/

introduzca la descripción de la imagen aquí

Solución solo para GIF

La barra de progreso indeterminada de Vista no se reproduce en bucle justo después de que se dispara a la derecha … Así que podría crear una imagen GIF lo suficientemente amplia y cuando la barra de progreso sea estrecha, demorará más en hacerlo y cuando sea más ancha vuelve a sonar sonner. 🙂

El tiempo de cada repetición es el mismo en ambos casos, pero en una barra estrecha se necesita menos para llegar al final que en los más amplios.