Progress bar gradients are hard to create

[Saucistophe]

The progress bar is animated using a transform: scaleX property.
This means that any styling that takes width into account is garbled. Let's say I wanted to create a rainbow, its gradient, even if spread over 100vw, is compressed over the current width of the bar:

Whereas using div width, I can either use the bar's width or the viewer's width as reference: