title: Make loader gone after content is loaded
body: <p>I have this code below that has a HTML Tab with a loader animation inside. What i'm trying to accomplish is whenever the contents inside the tab is fully loaded my loader animation will disappear i tried adding a JS code below which makes the loader disappear whenever the content is all loaded but it doesn't seem to be working. </p>
  
  <p>I am doing something wrong below? Any help would be greatly appreciated thanks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var tabs = document.getElementById("tabc");
  var loader = document.getElementById("loader");
  tabs.addEventListener('load', function()
  {
  loader.style.display = 'none';
  })
  
  
  function openCity(evt, cityName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i &lt; tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i &lt; tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
  }
  document.getElementById("defaultOpen").click();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {font-family: Arial;}
  
  /* Style the tab */
  .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
  }
  
  /* Style the buttons inside the tab */
  .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
      background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
      background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
  }
  .loader {
      border: 10px solid #f3f3f3;
      border-radius: 50%;
      border-top: 10px solid #05788C;
      border-bottom: 10px solid #05788C;
      width: 120px;
      height: 120px;
      -webkit-animation: spin 2s linear infinite;
   animation: spin 2s linear infinite;
      margin: auto;
      margin-top: 30px;
      margin-bottom: 30px;
  }
  @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="tab"&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'tabc')" id="defaultOpen"&gt;London&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div id="tabc" class="tabcontent"&gt;
          &lt;div class="loader"&gt;&lt;/div&gt;
          &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/wowAOdTYqw8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/wowAOdTYqw8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/wowAOdTYqw8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/wowAOdTYqw8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/wowAOdTYqw8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen&gt;&lt;/iframe&gt;
  
  &lt;/div&gt;
  
  
  
       
  &lt;/body&gt;
  &lt;/html&gt; </code></pre>
  </div>
  </div>
  </p>