title: Preloader Screen Using HTML CSS & JQuery Not Working
body: <p>Preloader Screen Using HTML CSS &amp; JQuery Not Working
  I wanted to add a preloader on my website.
  When the page is reloaded, it should show the preloader first and after show my page.
  Butm it does not stop showing me the preload icon.
  I used people's guides and for them it works properly but do not know why for me it does not work properly
  I have attached my full code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#preloader {
      position: fixed;
      z-index: 999999;
      background: black;
      width: 100%;
      height: 100%;
      justify-content: center;
      
  }
  #loader {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #A0816C;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
  }
  #loader:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #A0816C;
      -webkit-animation: spin 3s linear infinite;
      animation: spin 3s linear infinite;
  }
  #loader:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #A0816C;
      -webkit-animation: spin 1.5s linear infinite;
      animation: spin 1.5s linear infinite;
  }
  @-webkit-keyframes spin {
      0%   {
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
      }
      100% {
          -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }
  @keyframes spin {
      0%   {
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
      }
      100% {
          -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
      
    &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;title&gt;Black Bakery&lt;/title&gt;
      &lt;link rel="stylesheet" href="main.css"&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"&gt;&lt;/script&gt;  &lt;/head&gt;
  
    &lt;body&gt;
      
  
      &lt;div id="preloader"&gt;
        &lt;div id="loader"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;H1 style="color:red;"&gt;MORRR&lt;/H1&gt;
  
      &lt;script&gt;
          $(window).on("load",function(){
            $(".preloader").fadeOut(1000);
          });
      &lt;/script&gt;
   
  
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>