Preloader for site

preloader.html

<div style="padding: 0; margin: 0; height: 100vh; width: 100vw; background: rgb(0, 0, 0); position: fixed; z-index: 10000000;">
    <style>
        svg#pre_svg {
            position: fixed;
            top: 20%;
            height: 60%;
            left: 20%;
            width: 60%;
        }
    </style>
    <svg id="pre_svg" viewBox="0 0 160 160" width="160" height="160">
        <circle cx="80" cy="80" r="50" stroke="crimson" />
        <g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
            <path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FFF">
                <animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1s"
                repeatCount="indefinite" />
            </path>
        </g>
        <path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" />
        <text x="80" y="80" fill="crimson" text-anchor="middle" alignment-baseline="middle">loading</text>
    </svg>
    <script>
        window.addEventListener("load", function() {
            console.log("All content loaded.");
            document.querySelector("svg#pre_svg").parentNode.remove();
        })
    </script>
</div>