Home » Jquery » javascript – Hide navbar while ajax loader loading-Exceptionshub

javascript – Hide navbar while ajax loader loading-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment


I’m using ajax loader to hide my page until it loads everything. The problem is, for some reason it doesn’t hide my navbar as you can see on the picture below. I want it to hide everything, include the navbar aswell.

 <nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
        <div class="container-fluid">
          <div class="navbar-wrapper">

          <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
            <span class="sr-only">Toggle navigation</span>
            <span class="navbar-toggler-icon icon-bar"></span>
            <span class="navbar-toggler-icon icon-bar"></span>
            <span class="navbar-toggler-icon icon-bar"></span>
          <div class="collapse navbar-collapse justify-content-end">
            <form class="navbar-form">
              <div class="input-group no-border">
                <input type="text"  class="form-control" placeholder="Search..." id="myFilter" data-toggle="tooltip" data-placement="left" onkeyup="myFunction()">
                <button type="submit" class="btn btn-white btn-round btn-just-icon">
                  <i class="material-icons">search</i>
                  <div class="ripple-container"></div>
              <p id="notfound">Not found!</p>
            <ul class="navbar-nav">


<!-- loader -->
   <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#7cc576"/></svg></div>

$(document).ready(function($) {
    "use strict";
    // loader
    var loader = function() {
        setTimeout(function() { 
            if($('#ftco-loader').length > 0) {
        }, 1);



How to&Answer:

I think this is the issue of z-index.
Give your loader a higher z-index w.r.t. to your navbar/header.