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.
http://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
http://greensock.com/drawSVG
IE does not support CSS animation of SVG elements. It also doesn't support the standard built-in SMIL animations that SVG has.
If you convert your animation to native SVG animations, you could perhaps get it working using the FakeSmile library. Otherwise you will need to use some alternative fallback for IE - such as an animated gif or something.
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
I use Bootstrap columns for styling my pageI have 4 main div in my row and I expect them to display in a row but they aren't and also a scroll-bar are inserted in the bottom of the page
i have a navigation bar i made using MaterializeCSS and i was wondering how to center the bottom oneHere is my code:
Probably my third or fourth post on this subject, thanks for the help so far
I have a php sql query that will generate a lot of images, and I need a code that will overlay a semi transparent image on top of the original image on hover