css preloader loads but not act as preloader. appears after footer

css based preloder is loads in the footer of page. not acting like preloader. seems code conflict or i missed some code. short clip of preloader https://www.awesomescreenshot.com/video/9880883?key=061bd162c59b4bcee2a76cd33f73cea3

// placed in head section of worpress
<div class="cssload-container">
    <div class="cssload-item cssload-ventilator"></div>
</div>
//placed in body dection
<script>window.addEventListener("load", function () {
    const cssload-container = document.querySelector(".cssload-container");
    cssload-container.className += " hidden"; // class "cssload-container hidden"
}); </script>
plced in css section
.cssload-container {
    position: relative;
    width: 195px;
    height: 224px;
    overflow: hidden;
    margin:0px auto;
}

.cssload-container .cssload-item {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    width: 49px;
    height: 49px;
    background-color: rgb(1,1,44);
    box-shadow: 0 0 8px 1px rgba(219,14,181,0.57);
}

.cssload-container .cssload-ventilator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
    animation: cssload-spin 1.3s ease-in-out infinite reverse;
        -o-animation: cssload-spin 1.3s ease-in-out infinite reverse;
        -ms-animation: cssload-spin 1.3s ease-in-out infinite reverse;
        -webkit-animation: cssload-spin 1.3s ease-in-out infinite reverse;
        -moz-animation: cssload-spin 1.3s ease-in-out infinite reverse;
    transition: all 0.26s ease;
        -o-transition: all 0.26s ease;
        -ms-transition: all 0.26s ease;
        -webkit-transition: all 0.26s ease;
        -moz-transition: all 0.26s ease;
}

.cssload-container .cssload-ventilator:before, .cssload-container .cssload-ventilator:after {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(219,14,181);
    box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
    box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
        -o-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
        -ms-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
        -webkit-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
        -moz-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
    animation: cssload-shapeit 0.65s ease infinite alternate;
        -o-animation: cssload-shapeit 0.65s ease infinite alternate;
        -ms-animation: cssload-shapeit 0.65s ease infinite alternate;
        -webkit-animation: cssload-shapeit 0.65s ease infinite alternate;
        -moz-animation: cssload-shapeit 0.65s ease infinite alternate;
    transition: all 0.26s ease;
        -o-transition: all 0.26s ease;
        -ms-transition: all 0.26s ease;
        -webkit-transition: all 0.26s ease;
        -moz-transition: all 0.26s ease;
    content: '';
}
.cssload-container .cssload-ventilator:before {
    left: -125%;
    border-left: 2px solid rgb(1,1,44);
}
.cssload-container .cssload-ventilator:after {
    right: -125%;
    border-right: 2px solid rgb(1,1,44);
}





@keyframes cssload-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@-o-keyframes cssload-spin {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(360deg);
    }
}

@-ms-keyframes cssload-spin {
    from {
        -ms-transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}

@-webkit-keyframes cssload-spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes cssload-spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@keyframes cssload-shapeit {
    from {
        border-radius: 50%;
    }
    to {
        border-radius: 0px;
    }
}

@-o-keyframes cssload-shapeit {
    from {
        border-radius: 50%;
    }
    to {
        border-radius: 0px;
    }
}

@-ms-keyframes cssload-shapeit {
    from {
        border-radius: 50%;
    }
    to {
        border-radius: 0px;
    }
}

@-webkit-keyframes cssload-shapeit {
    from {
        border-radius: 50%;
    }
    to {
        border-radius: 0px;
    }
}

@-moz-keyframes cssload-shapeit {
    from {
        border-radius: 50%;
    }
    to {
        border-radius: 0px;
    }
}
.cssload-container.hidden {
    animation: fadeOut .05s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;

i am using divi theme in wordpress which allow to paste code in sections as commented.

kindly suggest the solution.