DEV Community

31 7

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

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay