Sólo con fines académicos, y aunque sé que no es la respuesta que necesitas, noté que dado un elemento progress que sea indeterminado (sin value) se puede animar el ancho del seudoelemento ::-moz-progress-bar
, pero los seudoelementos de webkit conservan su estilo inicial y no hacen caso a las animaciones. Ni el progress bar ni el progress value.
Sin embargo, dicho lo anterior, estos seudoelementos sí soportan transiciones. Pero como han de saber, una transición ocurre cuando un elemento sufre un cambio de estado como la adición de una clase. (o una seudoclase como :hover).
Lo siguiente funciona tanto en Chrome como en Firefox:
window.onload = function() {
document.querySelector('#progreso').className = 'llenandose';
};
progress {
width: 300px;
border: 1px solid #ccc;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background:none;
}
progress::-moz-progress-bar {
background:#36c;
width:0;
transition: width 2s linear;
}
progress::-webkit-progress-bar {
background:#36c;
width:0;
transition: width 2s linear;
}
.llenandose::-webkit-progress-bar {
width:100%;
}
.llenandose::-moz-progress-bar {
width:100%;
}
<progress id="progreso">Progreso</progress>
Pero volvemos a los dos problemas iniciales:
- Esto no funciona en todos los browsers
- No estás manipulando el indicador de progreso según el valor del elemento sino con una animación arbitraria.
En realidad no creo que haya una manera de hacerlo con puro CSS. La alternativa sería combinar lo que te dice Csharls con un poco de javascript para ir actualizando el "seudoprogreso" acorde a la variación del valor real de la barra, que estaría oculta.
Edit
Perdonen lo bruto... edité el fragmento de código para hacer un experimento y pisé lo que había hecho antes. Ahora lo restablecí.
::-webkit-progress-value
pero no funcionará en otros navegadores. Puedes simular la barra como dice @Csharls en su respuesta o acceder alvalue
deprogress
con javascript y modificarloprogress
se ve prefectamente en Firefox y el resto de navegadores pero no podrá animarlo con CSS en navegadores que no usenwebkit