title: Showing a loader until slideshow fully loaded
body: <p>I have the following slideshow and it's take too much to load because the images are too large soo i want to show a loader until the slideshow is fully loaded. Here is my slider:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="slideshow-container" &gt;
  
  
  
  &lt;div class="mySlides fade"&gt;
      &lt;div class="numbertext"&gt;3 / 1&lt;/div&gt;
    &lt;img src="Images/Poze galerie/1.jpg" style="width:100%"&gt;
  &lt;/div&gt;
  
  &lt;div class="mySlides fade"&gt;
      &lt;div class="numbertext"&gt;3 / 2&lt;/div&gt;
    &lt;img src="Images/Poze galerie/2.jpg" style="width:100%"&gt;
  &lt;/div&gt;
  
  &lt;div class="mySlides fade"&gt;
      &lt;div class="numbertext"&gt;3 / 3&lt;/div&gt;
    &lt;img src="Images/Poze galerie/7.jpg" style="width:100%"&gt;
  &lt;/div&gt;
  
  
  &lt;a class="prev" onclick="plusSlides(-1)"&gt;❮&lt;/a&gt;
  &lt;a class="next" onclick="plusSlides(1)"&gt;❯&lt;/a&gt;
  
  &lt;/div&gt;
  
   &lt;div style="text-align:center"&gt;
    &lt;span class="dot" onclick="currentSlide(1)"&gt;&lt;/span&gt;
    &lt;span class="dot" onclick="currentSlide(2)"&gt;&lt;/span&gt;
    &lt;span class="dot" onclick="currentSlide(3)"&gt;&lt;/span&gt;
  
  &lt;/div&gt;
  
  &lt;script src="Styles/SlideSow.js"&gt;&lt;/script&gt;
  </code></pre>
  
  
  
  <p>And i want to add this loader:</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>.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }
  
  @-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;div class="loader"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>how can i do that with javascript?</p>