How can I change the width of the image depending on the degree of page loading?

Question

JavaScript

Good evening.

There is a small preloader on which the logo should gradually become colored depending on the degree of page loading - 0% - bw, 100% - color. At the moment, I have implemented it through a timeout and overlapping of one block with a background with a black and white logo by another block with a background in the form of a colored logo. But you need to make sure that the overlap (the width of the color block changes from 0 to 100%) is gradual and goes along with the loading of the page. How can this be done? To be honest, I could not find a specific example. Found only to display% loading script with a plugin . The site itself.