Add "loading" animation to the canvas element while generating the image

Question

How can I add a simple (any) "loading" animation to the center of the canvas tag that is created while generating the image? (Obs: canvas size may change) ; Below in the script it is generating thumbnails directly from url’s (audiences) of videos

function thumbnailList() {
  var link = document.querySelectorAll(".selecao.video");
  for (let x = 0; x < link.length; x++) {
    let video = document.createElement("video");
    video.addEventListener('loadeddata',
      function() {
        this.currentTime = 6;
      }, false);
    video.addEventListener('seeked',
      function() {
        generateThumbnail(this, link[x]);
      }, false);
    video.preload = "auto";
    video.src = link[x].value;
  }
}

function generateThumbnail(video, link) {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  canvas.width = 160;
  canvas.height = 90;
  ctx.drawImage(video, 0, 0, 160, 90);
  link.parentElement.appendChild(canvas);
};
window.onload = thumbnailList();

<div id="box">
  <div class="item">
    <input class="selecao video" value="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
  </div>
  <div class="item">
    <input class="selecao video" value="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" />
  </div>
  <div class="item">
    <input class="selecao video" value="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" />
  </div>
</div>

Answer 1

You can create a div with a previous Loader.

function thumbnailList() {
    var link = document.querySelectorAll(".selecao.video");
    var loaders = document.querySelectorAll(".loader");
    for (let x = 0; x < link.length; x++) {
        let video = document.createElement("video");
        video.addEventListener('loadeddata',
        function() {
            this.currentTime = 6;
        }, false);
        video.addEventListener('seeked',
        function() {
            generateThumbnail(this, link[x]);
        }, false);
        video.preload = "auto";
        video.src = link[x].value;
        }
    for (var i = 0; i < loaders.length; i++) {
        loaders[i].style.display = "none";      
    }
}

function generateThumbnail(video, link) {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    canvas.width = 160;
    canvas.height = 90;
    ctx.drawImage(video, 0, 0, 160, 90);
    link.parentElement.querySelector(".video-container").appendChild(canvas);
};
window.onload = thumbnailList();

.loader {
position: absolute; 
top: 50%; left: 50%; 
transform: translate(-50%, -50%);
}
.video-container {
position:relative;
width: 160px;
height: 90px;
}

<div id="box">
<div class="item">
    <input class="selecao video" value="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
    <div class="video-container">
        <img src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/fancybox_loading.gif" class="loader">
    </div>
</div>
<div class="item">
    <input class="selecao video" value="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" />
    <div class="video-container">
        <img src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/fancybox_loading.gif" class="loader">
    </div>
</div>
<div class="item">
    <input class="selecao video" value="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" />
    <div class="video-container">
        <img src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/fancybox_loading.gif" class="loader">
    </div>
</div>
</div>