title: How to show page preloader only once
body: <p>Good afternoon,
  I'm trying to place page preloader into my webpage. But I can't set it to show only once, when I'm entering the page. Every time, when I click "home" button, it appears again. Could anyone help me with that please?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="loader-wrapper"&gt;
      &lt;div id="loader"&gt;&lt;/div&gt;
  
      &lt;div class="loader-section section-left"&gt;&lt;/div&gt;
      &lt;div class="loader-section section-right"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function() {
  
      setTimeout(function(){
          $('body').addClass('loaded');
          $('h1').css('color','#222222');
      }, 3000);
  
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#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: white;
  
      -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
  
      z-index: 1001;
  }
  
      #loader:before {
          content: "";
          position: absolute;
          top: 5px;
          left: 5px;
          right: 5px;
          bottom: 5px;
          border-radius: 50%;
          border: 3px solid transparent;
          border-top-color: gray;
  
          -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
      }
  
      #loader:after {
          content: "";
          position: absolute;
          top: 15px;
          left: 15px;
          right: 15px;
          bottom: 15px;
          border-radius: 50%;
          border: 3px solid transparent;
          border-top-color: white;
  
          -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
      }
  
      @-webkit-keyframes spin {
          0%   { 
              -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
              -ms-transform: rotate(0deg);  /* IE 9 */
              transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
          }
          100% {
              -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
              -ms-transform: rotate(360deg);  /* IE 9 */
              transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
          }
      }
      @keyframes spin {
          0%   { 
              -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
              -ms-transform: rotate(0deg);  /* IE 9 */
              transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
          }
          100% {
              -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
              -ms-transform: rotate(360deg);  /* IE 9 */
              transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
          }
      }
  </code></pre>