How to make css animation responsive in width?

Question

css

Code on codepen - codepen.io/Andrey-m/pen/QjypPV?editors=110
Trying to learn css animation
Please help me correct the code to keep adaptability.
At me at reduction of a window on width all collapses.
Conventionally, the "loading bar" is set in px, I put% the result is not the one expected
. The final result is predictable.
Suggest errors.
If someone can correct the code - you are a holy man, thank you very much.

Answer 1

More or less like this