I have a really simple loading animation that works perfectly on Firefox and Chrome, but in IE11 it's not showing the SVG figure.
Here is the full example: JSFiddle sample
SVG:
<svg class="circular-loader" viewBox="25 25 50 50">
<circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>
The animation, which is a rotation, is working on IE11, but the SVG, which is a circle, is not being displayed.
Any idea?
I just can't figure out what is not being supported by IE11.
Only Microsoft Edge will support SVG CSS Transitions and Animation.. especially stroke-dasharray
.
Please see the Microsoft Developer Docs:
https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements
Allows CSS Transitions and Animations to apply to SVG elements.
Unprefixed version: Microsoft Edge build 10240+
As you can see in my fork of your example. You were not seeing the loader spin due to not having the stroke
attribute on your circle
element.
https://jsfiddle.net/z8w4vuau/50/
You can see how it can spin now. But you will have to check if the browser is IE and adjust your stroke-dasharray
so it is larger dash. Since IE11 and below do not support animating SVG stroke-dasharray
and stroke-dashoffset
with CSS animation or transitions, unless it is Microsoft Edge build 10240+.
But if you need a cross browser solution to animate SVG, especially stroke-dasharray
and stroke-dashoffset
, then look into using a JS animation library like the GreenSock Animation Platform (GSAP). Using the DrawSVGPlugin