DEV Community

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 ๐Ÿ‡ฎ๐Ÿ‡ณ

๐Ÿ˜

 
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 ๐Ÿ‘๐ŸŽ‰๐Ÿ’

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

I noticed in some cases you used .spinner:before and .spinner:after instead of .spinner::before and .spinner::after for the pseudo-elements. I think you need to use double colons since a single colon is reserved for pseudo-classes, like :focus or :hover.

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.

Thread Thread
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Good to know!

Thread Thread
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

๐ŸŒท๐Ÿ˜

Thread Thread
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

You are right brother ๐Ÿ‘‹

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
 
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