SVG spinner isn't showing up on IE11 - html

I am using the material spinner from this codepen: https://codepen.io/mrrocks/pen/EiplA
It displays perfectly in all browsers except IE.
Here is the SVG icon:
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
Then we have the LESS to make it rotate and all that:
$offset: 187;
$duration: 1.4s;
.spinner {
animation: rotator $duration linear infinite;
}
#keyframes rotator {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
.path {
stroke-dasharray: $offset;
stroke-dashoffset: 0;
transform-origin: center;
animation:
dash $duration ease-in-out infinite,
colors ($duration*4) ease-in-out infinite;
}
#keyframes colors {
0% { stroke: #4285F4; }
25% { stroke: #DE3E35; }
50% { stroke: #F7C223; }
75% { stroke: #1B9A59; }
100% { stroke: #4285F4; }
}
#keyframes dash {
0% { stroke-dashoffset: $offset; }
50% {
stroke-dashoffset: $offset/4;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: $offset;
transform:rotate(450deg);
}
}
As far as I can tell everything I am using seems to be supported in IE11 according to caniuse.com: http://caniuse.com/#search=svg and http://caniuse.com/#feat=css-animation.
I tried adding <meta http-equiv="X-UA-Compatible" content="IE=edge"> but it had no effect.
Any ideas?

Related

SVG circle not appearing in HTML CSS

I am creating a really simple loader page for my application. I wanted to use a circle, that rotates, and as I saw a tutorial, I used the SVG and circle tags. Here is the code HTML:
<div className="loader">
<svg className="svg">
<circle cx="70" cy="70" height="100px" width="100px" />
</svg>
</div>
And here is all the involved CSS in this case:
.loader{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.svg{
width: 150px;
height: 150px;
animation: rotate 2s linear infinite;
}
#keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.svg circle{
background-color: red;
width: 1em;
height: 1em;
fill: var(--redwine);
stroke-width: 10;
stroke: var(--redwine);
stroke-linecap: round;
transform:translate(5px, 5px);
stroke-dasharray: 440;
stroke-dashoffset: 440;
animation: circular 4s linear infinite;
z-index: 100;
}
#keyframes circular{
0%, 100%{
stroke-dashoffset: 440;
}
50%{
stroke-dashoffset: 0;
}
50.1%{
stroke-dashoffset: 880;
}
}
The only problem with all this code is that whenever I open the page, to see if all is working, it gives me an empty page. So I try to inspect. When I hover in the browser the code of SVG, it shows the shadow of a square that rotates, but when I hover the circle code, it shows a point with the following label: circle 0x0. I think that it is not rendering correctly, or I am blocking it. I don't really know.
Can someone help? Thank you a lot

You are missing the radius attribute r.
<circle cx="70" cy="70" r="25" height="100px" width="100px" />
See below:
.loader {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.svg {
width: 150px;
height: 150px;
animation: rotate 2s linear infinite;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.svg circle {
background-color: red;
width: 1em;
height: 1em;
fill: var(--redwine);
stroke-width: 10;
stroke: var(--redwine);
stroke-linecap: round;
transform: translate(5px, 5px);
stroke-dasharray: 440;
stroke-dashoffset: 440;
animation: circular 4s linear infinite;
z-index: 100;
}
#keyframes circular {
0%,
100% {
stroke-dashoffset: 440;
}
50% {
stroke-dashoffset: 0;
}
50.1% {
stroke-dashoffset: 880;
}
}
<div className="loader">
<svg className="svg">
<circle cx="70" cy="70" r="25" height="100px" width="100px" />
</svg>
</div>

CSS animation spinner is intterrupted in IE Edge but works smooth on Firefox and Chrome

I have the following HTML and CSS code:
.spinner-container {
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
z-index: 2;
}
.spinner-container .path {
stroke-dasharray: 1,150;
stroke-dashoffset: 0;
stroke: rgba(27, 154, 89, 0.7);
stroke-linecap: round;
-webkit-animation: dash 1.5s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite;
}
#keyframes rotate {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1,150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90,150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90,150;
stroke-dashoffset: -124;
}
}
#-webkit-keyframes dash {
0% {
stroke-dasharray: 1,150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90,150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90,150;
stroke-dashoffset: -124;
}
}
<svg class="spinner-container" viewBox="0 0 44 44" style="width: 50px; height: 50px;"><circle class="path" cx="22" cy="22" r="20" fill="none" stroke-width="4"></circle></svg>
If you run it in IE Edge, you will see that animation is interrupted. How can be fixed ?

How to change size of SVG circle

I want to resize my first SVG circle from here, so I made the second, but there is a problem in the animation, the animation is not the same.
HTML:
<div class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
</svg>
</div>
<div style="margin-top: 50px;" class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="44" fill="none" stroke-width="8" stroke-miterlimit="10" />
</svg>
</div>
CSS:
body, svg, circle {
margin: 0px !important;
padding: 0px !important;
}
.loader {
position: relative;
margin: 0px auto;
padding: 0px;
width: 100px;
height: 100px;
zoom: 1;
background-color: grey;
}
.circular {
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#-webkit-keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%, 90% {
stroke: #ffa700;
}
}
#keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%, 90% {
stroke: #ffa700;
}
}
How to properly resize it?

The stroke-dasharray property of the circle element determine the length of the stroke's dash and the space between two dashes whereas the stroke-dashoffset determines the offset at which the stroke's dash starts. Within the #keyframes rules these properties are getting modified and thus ends up producing the animation effect. When the circle's radius (and thus the circumference) is changed, these properties (set within the keyframes) also have to modified in proportion to the radius.
Since the settings depend on the radius of the circle, I don't think you can keep the same animation (#keyframe) settings for both circles. At any time only one of them can work properly.
In the below snippet I have done the changes that are required to make the bigger circle work.
body,
svg,
circle {
margin: 0px !important;
padding: 0px !important;
}
.loader {
position: relative;
margin: 0px auto;
padding: 0px;
width: 100px;
height: 100px;
zoom: 1;
background-color: grey;
}
.circular {
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.path {
stroke-dasharray: 1, 440;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 440;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 440;
stroke-dashoffset: -77;
}
100% {
stroke-dasharray: 89, 440;
stroke-dashoffset: -272;
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 440;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 440;
stroke-dashoffset: -77;
}
100% {
stroke-dasharray: 89, 440;
stroke-dashoffset: -272;
}
}
#-webkit-keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
#keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
<div style="margin-top: 50px;" class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="44" fill="none" stroke-width="8" stroke-miterlimit="10" />
</svg>
</div>
Alternately, if you wish to make the same animation (#keyframe) settings work for both the circles at the same time, then you could consider using a transform: scale to create the bigger circle instead of manually modifying the radius of the circle. (But as you can see, the output is not exactly same as modifying the radius and hence I wouldn't really recommend this).
body,
svg,
circle {
margin: 0px !important;
padding: 0px !important;
}
.loader {
position: relative;
margin: 0px auto;
padding: 0px;
width: 100px;
height: 100px;
zoom: 1;
background-color: grey;
}
.circular {
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#-webkit-keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
#keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
.loader2 {
transform: scale(2.2);
}
<div class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
</svg>
</div>
<div style="margin-top: 100px;" class="loader loader2">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
</svg>
</div>

How to get inline svg animation working in IE

I have been trying to get an line svg animation to behave consistently cross-browser but, Internet Explorer 11 is not beginning the animation on page load.
To simplify my question I have forked an example from jczimmm
I have removed any vendor prefixes to distill the CSS into its barest form so they can be re-added if needed.
Here is the link to the fork on codepen.
Here is the svg
<div class="loader">
<svg class="circular">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>
</div>
and here is the css
body {
background-color: #eee;
}
.loader {
position: relative;
margin: 0px auto;
width: 100px;
height: 100px;
zoom: 1.7;
}
.circular {
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
height: 100px;
position: relative;
width: 100px;
}
.path {
stroke-dasharray: 1,200;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
#-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes dash {
0% {
stroke-dasharray: 1,200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89,200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89,200;
stroke-dashoffset: -124;
}
}
#keyframes dash {
0% {
stroke-dasharray: 1,200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89,200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89,200;
stroke-dashoffset: -124;
}
}
#-webkit-keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%, 90% {
stroke: #ffa700;
}
}
#keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%, 90% {
stroke: #ffa700;
}
}

Firefox won't play keyframe animations defined inside SVG embeded as background-image

I have an SVG with #keyframe animationS defined inside a <style> block within the file, which I embed in a page using the background-image property.
The animation works perfectly in Chrome and Safari, but not in Firefox. When the image itself is viewed in Firefox, the animation works as expected.
.loader {
height: 3.375rem;
width: 3.375rem;
background: url("http://www.haaretz.co.il/htz/images/htz-spinner.svg");
}
<div class="loader"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
<style>
.alef {
fill: #fff
}
.alef-bg {
fill: #09A5D9
}
.commet-wrapper {
-ms-transform: translate(76px, 76px) scale(-1, .57) skewY(50deg);
-webkit-transform: translate(76px, 76px) scale(-1, .57) skewY(50deg);
transform: translate(76px, 76px) scale(-1, .57) skewY(50deg);
}
.commet {
fill: #067194;
-webkit-animation: color-change 2s linear infinite .8s, spin 1s linear infinite;
animation: color-change 2s linear infinite .8s, spin 1s linear infinite;
}
#-webkit-keyframes color-change {
0%, 100% {
fill: #067194;
}
50% {
fill: #79C9E4;
}
}
#-webkit-keyframes spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes color-change {
0%, 100% {
fill: #067194;
}
50% {
fill: #79C9E4;
}
}
#keyframes spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
<g id="lower">
<circle class="alef-bg" cx="80" cy="80" r="50" />
<path class="alef" d="M100.281,68.29l2.867-1.655c0.439,1.038,0.813,1.661,0.813,1.661S102.515,68.293,100.281,68.29z M72.541,93.58c0,0-4.308-0.04-8.036,0c-1.929,0.022-3.277-0.844-4.204-2.207l-4.653,2.686c-0.612,5.78-1.794,10.405-2.4,12.212 c-0.464,0.86,0.084,0.932,0.084,0.932h21.388C70.909,99.456,72.541,93.58,72.541,93.58z M104.421,87.988 c-5.284-3.548-9.372-6.944-16.08-11.5c-0.273-0.185-0.525-0.496-0.742-0.875l-12.45,7.188l31.58,23.203 c-0.072-0.144,0.264-0.152,0.2-0.292c-1.436-2.984-2.436-6-2.944-9.076C103.341,92.728,103.593,91.712,104.421,87.988z"
/>
</g>
<g class="commet-wrapper">
<path class="commet" d="M0,70c35.899,0,48-31.34,48-70c0-19,27-19,27,0C75,38.66,41.421,70,0,70z">
</path>
</g>
<g id="upper">
<path class="alef-bg" d="M123.3,55C109.493,31.086,78.914,22.893,55,36.7S22.893,81.086,36.7,105L123.3,55z" />
<path class="alef" d="M55.785,65.404c-0.544,5.612-1.276,6.4-1.268,11.048c0.004,5.068,1.708,9.352,1.404,14.356 c-0.066,1.117-0.161,2.201-0.272,3.251l2.933-0.382l1.72-2.305c-1.925-2.832-2.004-7.837-1.52-11.661 c0.548-4.304,3.132-6.432,3.328-6.492l13.04,9.581l7.962-2.317l4.488-4.871c-0.509-0.887-0.812-2.186-0.622-3.397 c0.352-2.192,2.24-3.932,4.084-3.932c3.468,0,6.805,0.003,9.22,0.006l2.518-0.469l0.35-1.186c-1.148-2.713-2.76-8.355,0.561-13.831 c-16.072,0-18.04-0.008-18.04-0.008c0,1.228-0.672,2.784-0.528,5.372c0.148,2.664,1.812,4.844,0.756,8.856 c-0.828,3.144-1.864,4.552-2.776,5.152c-8.428-6.264-20.696-15.256-25.836-19.34l-3.508-0.004c0,0-0.312-0.048-0.208,0.164 C55.397,56.592,56.177,61.328,55.785,65.404z"
/>
</g>
</svg>
Any help would be appreciated, thanks in advance.

This is a bug within Firefox
See bugs:
bugzilla.mozilla.org/show_bug.cgi?id=908634
and
bugzilla.mozilla.org/show_bug.cgi?id=1121478
Only embedded SVG works.