DEV Community

loading...

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

Atul Prajapati
HTML, CSS, Bootstrap, XML, ajax, react js, WordPress, Magento, Shopify, Photoshop, Camtasia, SEO & learning new skills every moment πŸ‘¨πŸΌβ€πŸ’» | I believe in learning and sharing with others πŸ›΄
・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 (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 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 πŸ‘πŸŽ‰πŸ’

atulcodex profile image
Atul Prajapati Author

😁

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

Good to know!

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

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 Author

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 Author

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