Show page loader on load

I'm trying to show a loader while loading the page.

So far I have this code:

const contendor_loader = document.querySelector('.contenedor_loader')
function load() {
     contendor_loader.style.visibility ="hidden";
}
window.onload = load;

in body i have this

<div class="contenedor_loader">
   <div class="loader"></div>
</div>

This is my search button:

<button class="btn-search" type="submit" id="search-btn" style="background- 
   color: #006CBE;">
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 
      viewBox="0 0 24 24">
      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 
         5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 
         4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 
         11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"> 
      </path>
   </svg>
</button>

Clicking on the button redirects to a new page with the results

What I need is to show this loader when they click on a search button and then disappear when the page finishes loading. But sometimes searching can take more than 10 seconds, where the loader does not load.

What happens now is that when you click, it does not show the loader until it go to the next page

Any idea how I can do it, I don't understand much of javascript, I saw this code elsewhere, which works fine, but just doesn't load at the time I need.

Regards

Show page loader on load

0 Answers