less awesome
(animating width)
.bad-progress { animation-name: bad-ani; } @keyframes bad-ani { 0% { width: 0%; } 100% { width: 100%; } }
more awesome
(animating transform)
.good-progress { transform-origin: 0 0; animation-name: good-ani; } @keyframes good-ani { 0% { transform: scaleX(0); } 100% { transform: scaleX(100%); } }