JavaScript Preloader Not Working Properly

Question

I've been working on a website and I recently decided to implement a preloader to my website. I have everything in place but the JavaScript to control the loader does not seem to work.

Here's my code:

As there's quite some code, I have uploaded it on JSFiddle Here it is https://jsfiddle.net/mvc2fe1a/1/

<div class="spinner-wrapper">
    <div class="spinner">
        <svg width="634" height="62" viewBox="0 0 634 62" fill="none" xmlns="http://www.w3.org/2000/svg">
...
        </svg>

    </div>
    </div>

.spinner-wrapper {
    height: 100%;
    width: 100%;
    background: #333;
    position: absolute;
    top: 0;
    left: 0;
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

function loadPage() {
    let timeout = setTimeout(showPage, 3000);
}

function showPage() {
    document.querySelector('.spinner-wrapper').style.display = 'none'
    document.querySelector('.container').style.display = 'block'
}

However this code does not work, what am I doing wrong?

What do you mean by "doesn't work" that could be a lot of things. — Bryce Howitson
– Bryce Howitson, Commented Nov 15, 2019 at 16:40
What are you trying to achieve? And what is happening instead? — Merijndk
– Merijndk, Commented Nov 15, 2019 at 16:40

hungerstar · Accepted Answer · 2019-11-15 16:49:43Z

2

You need to call your loadPage function. Right now, you have only defined it.

// other code
loadPage();

edited Nov 15, 2019 at 16:49

answered Nov 15, 2019 at 16:44

hungerstar

21.8k6 gold badges52 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Himanshu Sardana Over a year ago

Dude you are a lifesaver

Merijndk · Accepted Answer · 2019-11-15 16:47:31Z

0

You forgot to call the loadPage() function

I edited your Fiddle: https://jsfiddle.net/woma7h83/

edited Nov 15, 2019 at 16:47

answered Nov 15, 2019 at 16:46

Merijndk

1,6934 gold badges18 silver badges36 bronze badges

Collectives™ on Stack Overflow

JavaScript Preloader Not Working Properly

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related