title: Preloader keeps on loading and doesnt disappear when the content is loaded
body: <p>Ok so, first of all, Here's my 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-js lang-js prettyprint-override"><code>var loader = document.getElementById("loader");
  window.addEventListener("loader", function () {
    loader.style.display = "none";
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    height: 100%;
    widows: 100%;
    overflow: hidden;
  }
  
  .loader {
    position: absolute;
    height: 80px;
    width: 80px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 6px solid lightgrey;
    border-radius: 100%;
    border-top: 6px solid skyblue;
    animation: spin 1s infinite linear;
  }
  
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="loader" id="loader"&gt;&lt;/div&gt;
  &lt;h1&gt;Hello World&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Now the problem is that the content gets loaded but the spinner doesn't disappear. Any Solutions.
  BTW. This is my first post here so if you find that the code is not formatted correctly or some other mistake then forgive me.</p>