In my web project, I have used a preloader to load when a page loads.

But I want to load it whenever the user clicks the nav item, if the item clicks show the preloader, and then when the result loads, hide the preloader.

Currently, the preloader works when the nav item clicks and when the requested page started to load.

I would like to know how to load it when as soon as the nav item is clicked.

This is my current code.

<style>
.loader-bg {
    position: fixed;
    z-index: 999999;
    background: #fff;
    width: 100%;
    height: 100%;
}

.loader {
    border: 0 solid transparent;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: calc(50vh - 75px);
    left: calc(50vw - 75px);
}

    .loader:before, .loader:after {
        content: '';
        border: 1em solid #ff5733;
        border-radius: 50%;
        width: inherit;
        height: inherit;
        position: absolute;
        top: 0;
        left: 0;
        animation: loader 2s liner infinite;
        opacity: 0;
    }

    .loader:before {
        animation-delay: .5s;
    }
@keyframes loader{
    0%{
        transform:scale(0);
        opacity:0;
    }
    50%{
        opacity:1;
    }
    100%{
        transform:scale(1);
        opacity:0;
    }
}
</style>

 <div class="loader-bg">
   <div class="loader" id="spinner">
     <img src="~/Th/01.png" class="mr-2" alt="logo" width="100px" height="auto" class="center" />
     <i class="spinner-border text-secondary"></i>
     <label> &nbsp; Please wait...</label>
   </div>
 </div>

<script>
  setTimeout(function () {
      $('.loader-bg').fadeToggle();
    }, 10); 
</script>