DEV Community

🚩 Atul Prajapati 🇮🇳
🚩 Atul Prajapati 🇮🇳

Posted on

How to add loader in the website in a few seconds 😎

Magic of this few lines of JS code 🐝

let spinnerWrapper = document.querySelector('.spinner-wrapper');

window.addEventListener('load', function(){
spinnerWrapper.style.display= 'none';
});

Oldest comments (21)

Collapse
 
waylonwalker profile image
Waylon Walker

I had no idea that was so simple without a framework!

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman • Edited

Add this to re-enable the loading layer on page exit(ing):

window.addEventListener('beforeunload', function() {
    spinnerWrapper.style.display = "";
});
Collapse
 
mzaini30 profile image
Zen

Kayaknya nggak perlu deh

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman • Edited

Coba dulu. Terus klik salah satu tautan di halaman. Efek loading bakal muncul lagi.

Thread Thread
 
mzaini30 profile image
Zen

Eh iya juga ya

Thread Thread
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Sorry bro but I can't understand your language 🙄 but thanks for commenting

Thread Thread
 
mzaini30 profile image
Zen

Hehehehehe. I so sorry. I use Indonesian because, Taufik is Indonesian. Hehehehehe

taufik_nurrohman image
Thread Thread
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Cool 👏🎉💝

 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

😁

Collapse
 
safinghoghabori profile image
Safin Ghoghabori

Really love this one.
One question is it is compulsory to set the /stimulate page content/ code ...?

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

No it's your body content I have added it for page content put here your page code. Any other questions bro?

Collapse
 
safinghoghabori profile image
Safin Ghoghabori

Ohk bro thanks for ur reply

Thread Thread
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

I love to do that ✌️

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Okay hmm interesting 😲 I will try thanks for your opinion 🌷

Collapse
 
danspratling profile image
Dan Spratling

The logic is correct Aleksandr, but in practice this is rarely needed. Most people just use : for everything. I've never seen a situation where using ::before worked and :before didn't.

 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

🌷😁

Thread Thread
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

You are right brother 👋

Collapse
 
ytf1shhh profile image
YTF1shhh

How would I make the loader disappear in a specific amount of time (100ms, 500ms etc...) instead of on content load?

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Hey I'm sorry but I haven't learned advance javascript yet but I have found a useful answer on stackoverflow checkout this link click here