I tried making this in JavaScript, animating with setInterval, and it was complicated and janky and bad. I’m sure a library like Velocity could get it done, but I opted for nice, simple CSS transitions.

Pressing a key sets width to 100% and background-color to green, releasing a key sets width to 0 and background-color to blue, and CSS transitions handle the rest. A select element lets you see different easings - changing the option changes the progress bar’s class, with a different ‘transition-timimg-function’ for each class.

Play with it here!