Issue with svg animation while loading

Question

I'm facing an issue with an SVG animated preloader I have on my website. (I'm using the SVG loading animation from w3schools).

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?

var vid = document.getElementById("header-video");

if(vid){
    vid.onloadeddata = function() {
        $(".loading-wrapper").fadeOut("slow");
    };
}

.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;
}

<div class="video_header">
                <div class="loading-wrapper">
                    <!-- 2 -->
                    <div class="loader loader--style2" title="1">
                        <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">
                        <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">
                        <animateTransform attributeType="xml"
                            attributeName="transform"
                            type="rotate"
                            from="0 25 25"
                            to="360 25 25"
                            dur="0.6s"
                            repeatCount="indefinite"/>
                        </path>
                        </svg>
                    </div>
                </div>
                <div class="gradient-overlay"></div>
                <video autoplay loop muted playsinline class="wrapper__video" id="header-video">
                    <source src="i/Website_Video_Header_1.mp4">
                </video>
            </div>

Answer 1

SVG animations using markup like this are being phased out by the browsers. Instead you should animate it using CSS.

Remove the <animateTransform> tag. And add some CSS along the lines of :

.loading-wrapper svg path {
   animation: .6s linear infinite rotate;
}
@keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); }  }