DEV Community

loading...

How to add loader in the website in a few seconds ๐Ÿ˜Ž

atulcodex profile image Atul Prajapati ใƒป1 min read

Magic of this few lines of JS code ๐Ÿ

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

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

Discussion (19)

pic
Editor guide
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
atulcodex profile image
Atul Prajapati Author

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 Author

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 Author

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
Thread Thread
atulcodex profile image
Atul Prajapati Author

๐ŸŒท๐Ÿ˜

Thread Thread
atulcodex profile image
Atul Prajapati Author

You are right brother ๐Ÿ‘‹

Collapse
waylonwalker profile image
Waylon Walker

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

Collapse
safin007 profile image
safin-007

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

Collapse
atulcodex profile image
Atul Prajapati Author

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

Collapse
safin007 profile image
safin-007

Ohk bro thanks for ur reply

Thread Thread
atulcodex profile image
Atul Prajapati Author

I love to do that โœŒ๏ธ