<style>
    #load_div{
        width: 100vw;
        height: 100vh;
        display: flex;
        position: absolute;
        z-index: 10000;
        background-color: white;
        pointer-events: none;
        transition: background-color 1s;
    }
    #load_logo{
        width: 12vw;
        /* height: 12vh; */
        /* margin: auto; */  
        position:absolute;
        top:30.5%;
        left:50%;
        -ms-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        pointer-events: none;
        transition-duration: 800ms;
    }
</style>

<div id="load_div">
    <img id="load_logo" src="/img/Умничка лого с обводкой-02 1.png" alt="">
</div>

<script>
    let loaded_pos={
        x:"10%",
        // y:"6%",
        // x: "55px",
        y: "45px",
        w:"8vw",
        h:"8vh"
    }
    let loading_pos={
        x:"50%",
        y:"30.5%",
        w:"12vw",
        h:"12vh"
    }
    // document.getElementById("load_logo").style.transform = `translate(${center.x}px,${center.y}px)`
    function loaded(){
        let logo = document.getElementById("load_logo");
        let load_div = document.getElementById("load_div");
        load_div.style.backgroundColor = "transparent";
        // load_div.style.transition = "background-color 1s"
        // logo.style.transform = `translate(0px,0px)`;
        logo.style.left = loaded_pos.x;
        logo.style.top = loaded_pos.y;
        logo.style.width = loaded_pos.w
        load_div.style.height = `${document.getElementsByTagName("body")[0].scrollHeight}px`;
    }
    function loading(){
        let logo = document.getElementById("load_logo");
        let load_div = document.getElementById("load_div");
        load_div.style.backgroundColor = "white";
        // load_div.style.transition = "background-color 1s"
        // logo.style.transform = `translate(-50%,-50%)`;
        logo.style.left = loading_pos.x;
        logo.style.top = loading_pos.y;
        logo.style.width = loading_pos.w
        load_div.style.height = `${document.getElementsByTagName("body")[0].scrollHeight}px`;
    }
</script>