title: How to add a spinner when the video is loading? with Javascript
body: <p>I have a custom player and I need to know how I can add a spinner to it. The code is from another guy, but in the tutorial he didn't show how to do a loading spinner, and now I don't know how I can create with java.</p>
  <p>I've tried this (Javascript):</p>
  <pre><code>video.on(&quot;waiting&quot;, function ()
  {
      this.addClass(&quot;video-custom-waiting&quot;);
  });
  video.on(&quot;playing&quot;, function ()
  {
      this.removeClass(&quot;video-custom-waiting&quot;);
  });
  </code></pre>
  <p>but didn't work, it still show the spinner even with this code. maybe this code doesn't work in my case, i don't know.</p>
  <p>I created a div with the class <code>spinner</code>, and put the classes like this:</p>
  <pre><code>.video-custom-waiting .spinner{
  display:block;
  }
  .spinner{
  position:absolute;
  top:48%;
  left:48%;
  display:none;
  border:8px solid rgba(0,0,0,.1);
  border-left-color:red;
  height:60px;
  width:60px;
  border-radius:50%;
  animation: spin 1s linear infinite;
  z-index:999;
  }
  </code></pre>
  <p>Video-custom-waiting is designed to hide the spinner when the video finishes loading, but as you can see, it's not working.</p>
  <p>How can i fix it? and how a use the spinner when the video is pause for load, when for example an user jump for a part of the video and he need load this part?</p>
  <p>html part.</p>
  <p>This is the div spinner, the spinner that i want put on the player
  <code> &lt;div class=&quot;spinner&quot;&gt;&lt;/div&gt;</code></p>
  <p>And my video code:</p>
  <pre><code>&lt;video controls class=&quot;video&quot; id=&quot;video&quot;  autoplay disablepictureinpicture tabindex=&quot;-1&quot; &gt;
  </code></pre>