title: How to add a loading animation while Fetch data from API? Vanilla js
body: <p>I tried a lot of answers here, but all answers I found, people are using jquery, ajax, react or things like that. I would like a answer with pure javascript (vanilla js).</p>
  
  <pre><code>const movieApiMovies = () =&gt; {
  fetch(movieApi_url + "movies/")
      .then(response =&gt; response.json())
      .then(function (data) {
          let result = `&lt;h2&gt; Movies I've watched! &lt;/h2&gt;`;
          data.forEach((movie) =&gt; {
              const {id, name, year, note_imdb, genre, duration} = movie;
              result +=
                  `&lt;div&gt;
                      &lt;h5&gt; Movie ID: ${id} &lt;/h5&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Movie name: ${name}&lt;/li&gt;
                          &lt;li&gt;Movie year: ${year}&lt;/li&gt;
                          &lt;li&gt;Movie note on IMDB: ${note_imdb}&lt;/li&gt;
                          &lt;li&gt;Movie Genre: ${genre}&lt;/li&gt;
                          &lt;li&gt;Movie duration: ${duration}&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;`;
              document.getElementById('movieResult').innerHTML = result;
          })
      })
  };
  </code></pre>
  
  <p>I have a animation, it's on this Div element.</p>
  
  <pre><code>&lt;div class="boxLoading"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And I have a button that is going to call everything.</p>
  
  <pre><code>&lt;div id="button1"&gt;
        &lt;button class="button" id="moviesfromapi"onclick="movieApiMovies ()"&gt;Display&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>