title: Issue with svg animation while loading
body: <p>I'm facing an issue with an SVG animated preloader I have on my website. (I'm using the SVG loading animation from w3schools).</p>
  
  <p>Basically, I have a hero banner with a looping video. I want there to be a loading indicator while the video is loading, and then have the loader fade out when the video in my banner is done loading.
  So far it seems like the fade out is working, but the SVG animation seems to get stuck, instead of looping. The expected behavior would be to have the SVG continually loop until the video is loaded, but it seems to just be stuck on frame 1. Does anyone know why this might be happening or what the fix might be?</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-js lang-js prettyprint-override"><code>var vid = document.getElementById("header-video");
  
  if(vid){
      vid.onloadeddata = function() {
          $(".loading-wrapper").fadeOut("slow");
      };
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.loader{
    margin: 0 0 2em;
    height: 100px;
    width: 20%;
    text-align: center;
    padding: 1em;
    margin: 0 auto 1em;
    display: inline-block;
    vertical-align: top;
  }
  
  svg path,
  svg rect{
    fill: #7AC013;
  }
  
  .loading-wrapper{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgb(41, 45, 46);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
  }
  
  .video_header{
      width: 100%;
      height: 100vh;
      overflow: hidden;
  }
    
  .video_header .wrapper__video{
      object-fit: cover;
      width: 100%;
      height: 100%;
      z-index: -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="video_header"&gt;
                  &lt;div class="loading-wrapper"&gt;
                      &lt;!-- 2 --&gt;
                      &lt;div class="loader loader--style2" title="1"&gt;
                          &lt;svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                          width="64px" height="64px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"&gt;
                          &lt;path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"&gt;
                          &lt;animateTransform attributeType="xml"
                              attributeName="transform"
                              type="rotate"
                              from="0 25 25"
                              to="360 25 25"
                              dur="0.6s"
                              repeatCount="indefinite"/&gt;
                          &lt;/path&gt;
                          &lt;/svg&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="gradient-overlay"&gt;&lt;/div&gt;
                  &lt;video autoplay loop muted playsinline class="wrapper__video" id="header-video"&gt;
                      &lt;source src="i/Website_Video_Header_1.mp4"&gt;
                  &lt;/video&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>