With a quick look at your code it looks like all code is executed when the javascript-file gets loaded. This could be a timing-issue (your javascript-file is retrieved faster than your HTML-page: the elements it wants to act on are not available yet).

With jQuery you can quickly solve that by embedding your variables and functions in this holder:

$( document ).ready(function() {
    // place code here, the document is waiting
});

Because you are not using jQuery you could use this:

add the “defer” attribute.

<script type="text/javascript" src="scripts/loading.js" defer></script>

This should be enough, specs found here:

https://www.w3schools.com/tags/att_script_defer.asp

Or if you want only some functions executed when the document is loaded you could use the function which all browsers support:

(function() {
    // place code here, the document is waiting
})();

I made a loader that uses css and javascript to play an animation. On loading the site for the first time the animation sometimes doesn’t play leaving a blank white screen. I believe it has something to do with caching on the second load that makes it work. Thanks in advance.

HTML:

    <section id="loading">
        <div class="circle spin"></div>
        <img src="src/j2.svg" alt="J2 Logo">
    </section>
    <link rel="stylesheet" href="css/loading.css">
    <script type="text/javascript" src="scripts/loading.js"></script>

loading.css:
https://pastebin.com/E16PMTtQ

loading.js:
https://pastebin.com/1X09KatC

The websites link is https://j2.business