show loader using pure javascript

Question

<script> setTimeout(function(){ $('.loader_bg').fadeToggle(); }, 1500); </script> <div class="loader_bg"> <div class="loader"></div> </div>

I have a loader in my website . I want to show a loader for 1.5 sec to user till page fully load have achieved somewhat to this through j query but want it in pure javascript as haven't use any j query through out the project

FWIW, showing the loader for a predetermined, hardcoded length of time is something of an antipattern: what happens if the user is on a slow connection, and it takes them six seconds before the site loads? They will see a broken/incomplete page after your loader disappears. And if they have a very fast connection, and your page loads for them in 200ms, you are forcing them to wait an additional 1.3 seconds for no reason. It would be better to try to detect when your page is actually loaded and then hid the spinner. — Alexander Nied
– Alexander Nied, Commented May 7, 2021 at 13:37

Bernhard Beatus · Accepted Answer · 2021-05-07 13:45:47Z

function show_loader() { var img = document.createElement("img"); img.src = 'https://via.placeholder.com/150'; img.className = 'loader'; img.id = 'image'; document.body.appendChild(img); } show_loader(); setTimeout(function() { document.getElementById("image").classList.add('loaderOut'); }, 3000);

.loader { display: block; } .loaderOut { display: none; }

Collectives™ on Stack Overflow

show loader using pure javascript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related