css spinner animation works at Chrome but not at IE11 and FIrefox42

Question

I have a css spinner. It works fine in Chrome, though in Firefox it doesn't work properly and it doesn't appear at all in IE11.

@-webkit-keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}a

@keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}

@-webkit-keyframes colors {
  0% {
    stroke: #4285F4;
  }
  25% {
    stroke: #4285F4;
  }
  50% {
    stroke: #4285F4;
  }
  75% {
    stroke: #4285F4;
  }
  100% {
    stroke: #4285F4;
  }
}

@keyframes colors {
  0% {
    stroke: #4285F4;
  }
  25% {
    stroke: #4285F4;
  }
  50% {
    stroke: #4285F4;
  }
  75% {
    stroke: #4285F4;
  }
  100% {
    stroke: #4285F4;
  }
}

@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}

.spinner {
  -webkit-animation: rotator 1.4s linear infinite;
  animation: rotator 1.4s linear infinite;
}

.path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  -webkit-transform-origin: center;
  transform-origin: center;
  fill: -ms-input-placeholder;
  fill: -webkit-input-placeholde;
  -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
  animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66">
  <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>

https://jsfiddle.net/4o2unhx0/

Answer 1

You forgot units for stroke-* props. Use %, px, cm, etc. Check MSDN. I think Chrome & FF use default units for it, but Edge don't.

UPD: So, what about IE? Check this answer in similar question and this Dev Resources. Your spinner also works (no so good, but..) if you set stroke attribute for circle element. But only rotate works, because IE can't animate SVG elements.