How to trigger a loading animation when the webpage is loading using javascript

I’m trying to make a loader that appears whenever the webpage itself is loading. So like upon first loading in as well as redirecting and whatever else, I want it to load when my browser is loading.

I currently have it set so that the loader is visible until the page is ready but nothing else will trigger it after that.

<body>
    <div class="loaderContainer_Full">
        <div class="loaderContainer_Partial">
            <div class="loader"></div>
        </div>
    </div>
</body>
<script>
    document.onreadystatechange = function() {
            if (document.readyState !== "complete") {
                document.querySelector(
                  ".loaderContainer_Full").style.visibility = "visible";
            } else {
                document.querySelector(
                  ".loaderContainer_Full").style.display = "none";
                document.querySelector(
                  "body").style.visibility = "visible";
            }
        };
</script>

I’ve done some searching but I couldn’t find anything that loads when the page loads. Is this possible? If so how can I do it? I want to do this using only HTML, JavaScript, css and php as it’s for a school assignment.