title: How to stop JQuery loader after page has loaded?
body: <p>I cannot get JQuery loader to disappear after loading web page. What types of issues usually cause the loader to not stop?</p>
  
  <p>My web site is being built using Django framework and is on a local machine "localhost:8000". I have tried to clear Cache and Cookies but this does nothing. I have also tried setting a timeout but that does not seem to work either.</p>
  
  <p>One concern I have is where to put the loader so I decided that putting it on the base.html was best. Could this be affecting it?</p>
  
  <p>In my base.html file:</p>
  
  <pre><code>&lt;div class="loader-wrapper"&gt;
  &lt;span class="loader"&gt;&lt;span class="loader-inner"&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;/div&gt;
      &lt;script&gt;
         $(function(){
            $(window).on("load", function(){
                $(this).remove();
                });
            });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>My CSS code:</p>
  
  <pre><code>.loader-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #242f3f;
    display:flex;
    justify-content: center;
    align-items: center;
  }
  .loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    border: 4px solid #Fff;
    animation: loader 2s infinite ease;
  }
  .loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: #fff;
    animation: loader-inner 2s infinite ease-in;
  }
  @keyframes loader {
    0% { transform: rotate(0deg);}
    25% { transform: rotate(180deg);}
    50% { transform: rotate(180deg);}
    75% { transform: rotate(360deg);}
    100% { transform: rotate(360deg);}
  }
  @keyframes loader-inner {
    0% { height: 0%;}
    25% { height: 0%;}
    50% { height: 100%;}
    75% { height: 100%;}
    100% { height: 0%;}
  }
  </code></pre>
  
  <p>I expected the loader to spin until page loads then to fade out but all it does is continue to spin.</p>
  
  <p>This code is re-used from another website. My goal is to get it working then examine the code to understand how it works so that I can create my own loader. </p>
  
  <p>Thanks in advance for the help!</p>
  
  <p>EDIT: When I put the JQuery code at the top of the html file it loads behind the blog app and continues to spin in the background.</p>