How to make a site preloader from a logo?

Question

css

Hi all!
How to implement a site preloader from a logo? Are there any examples?
Initially, the logo will be white, and will be filled with color.
Naturally, the color should be filled based on the site load.

Answer 1

as an option, overlapping one logo with another
https://jsfiddle.net/c5o5qm7o/

Answer 2

.logo{
    width: 100px;
    height: 20px;
    position: relative;
    background-size: cover;
    background-image: url(logo.png);
}
.logo__loaded{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 0%;
    background-size: cover;
    background-image: url(logo2.png);
}

<div class="logo">
  <div class="logo__loaded" style="70%"></div>
</div

Answer 3

I recently solved exactly the same problem.
Made the logo loading depending on the weight of the page files, i.e. until all the pictures are loaded - the logo is filled with color. The emphasis was on the pictures, because. text files don't affect the download much.
The bottom line is that you need to use svg (for masks) and, as mentioned above, a javascript code to determine if the pictures have loaded or not.