title: css spinner animation works at Chrome but not at IE11 and FIrefox42
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@-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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66"&gt;
    &lt;circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"&gt;&lt;/circle&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/4o2unhx0/" rel="nofollow">https://jsfiddle.net/4o2unhx0/</a></p>