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';
});

Top comments (21)

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
 
waylonwalker profile image
Waylon Walker •

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

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