Loading animations not working in Edge - html

Question

I have a loading animation that works perfectly fine in chrome and firefox but not at all in IE10 or edge.
This is my html:
<svg viewBox="0 0 120 120" version="1.1">
<symbol id="s-circle">
<circle r="10" cx="20" cy="20"></circle>
</symbol>
<g>
<#list 1..9 as i>
<g class="g-circle">
<use href="#s-circle"/>
</g>
</#list>
</g>
</svg>
and this is my scss:
$max: 9;
$angle: 360/$max;
$size: 160px;
$fill: $grey;
.cart__spinner {
position: relative;
overflow: hidden;
width: 280px;
height: 280px;
margin: 50px auto 0;
}
svg {
height: $size;
width: $size;
margin: 0 4em 4em;
overflow: visible;
}
#function transform($item: 1){
$base: rotate(#{-$angle*$item}deg) translate(5px, 5px);
#return $base;
}
.g-circle {
transform-origin: $size/2 $size/2;
fill: $fill;
animation: opacity 1.2s linear infinite;
#for $item from 1 through $max {
&:nth-child(#{$max}n + #{$item}) {
animation-delay: -#{$item/10}s;
transform: transform($item) scale(.9);
-ms-transform: transform($item) scale(.9);
}
}
}
#keyframes opacity {
0% {
fill-opacity: 1;
}
100% {
fill-opacity: 0;
}
}
#keyframes transform {
10% {
transform-origin: 70px 70px;
transform: scale(.75);
}
}
In IE10 or edge, there is just one dot on the page and not animation.
Can someone please explain why this is happening. Di I need to explicitly add support for IE?
Thanks

Answer 1

I figured my problem is that IE does not support animations on svg.