Loader CSS works in Chrome and Safari, not in IE or Firefox

Question

I used this code in my webpage, it works well in Chrome and Safari, but in IE and Mozilla, it is freezing, does not work. How could I fix this problem?

http://codepen.io/jeyachanthuruj/pen/Cihsp

HTML:

<div class="loader">
    <div class="spin"></div>
</div>

CSS:

.loader{
  height:80px;
  width:80px;
  position:relative;
  margin:100px auto;

  .spin {
    height:80px;
    width:80px;
    -webkit-animation:myspin 1s ease infinite;

    &, &:before {
      box-sizing:border-box;
      border:5px solid blue;
      border-left-color:#3369E8;
      border-top-color:#D50F25;
      border-right-color:#009925;
      border-bottom-color:#EEB211;
      border-radius:50%;
      position:absolute;
      display:block;

    }

    &:before{
      content:" ";
      left:50%;
      top:50%;
      height:96px;
      width:96px;
      margin:-48px;
      border-width:6px;
      border-left-color:rgba(0,0,0,0);
      border-right-color:rgba(0,0,0,0);
      border-top-color:rgba(0,0,0,0);
      border-bottom-color:rgba(0,0,0,.2);
      opacity:1;
      -webkit-animation:myspin 1s reverse ease infinite;
    }
  }
}

@-webkit-keyframes myspin {
  from {
    -webkit-transform:rotate(0deg);
  }

  to {
    -webkit-transform:rotate(360deg);
  }
}

please don't try to add a link in that way just to bypass the requirement about the code insertion — Fabrizio Calderan, Apr 16 '15 at 14:46

score 0 · Answer 1 · answered Apr 16 '15 at 14:45

0

You're using just -webkit-animation, IE and Mozilla dont use this CSS3 property. You should use -moz-animation for Mozilla and animation for IE. Check out this link.

answered Apr 16 '15 at 14:45

bodruk

3,242
8
34
52

score 0 · Accepted Answer · answered Apr 16 '15 at 15:20

See updates codepen works on IE here

.loader{
  height:80px;
  width:80px;
  position:relative;
  margin:100px auto;

  .spin {
    height:80px;
    width:80px;
    -webkit-animation:myspin 1s ease infinite;
    animation:myspin 1s ease infinite;

    &, &:before {
      box-sizing:border-box;
      border:5px solid blue;
      border-left-color:#3369E8;
      border-top-color:#D50F25;
      border-right-color:#009925;
      border-bottom-color:#EEB211;
      border-radius:50%;
      position:absolute;
      display:block;

    }

    &:before{
      content:" ";
      left:50%;
      top:50%;
      height:96px;
      width:96px;
      margin:-48px;
      border-width:6px;
      border-left-color:rgba(0,0,0,0);
      border-right-color:rgba(0,0,0,0);
      border-top-color:rgba(0,0,0,0);
      border-bottom-color:rgba(0,0,0,.2);
      opacity:1;
      -webkit-animation:myspin 1s reverse ease infinite;
      animation:myspin 1s reverse ease infinite;
    }
  }
}

@-webkit-keyframes myspin {
  from {
    -webkit-transform:rotate(0deg);
  }

  to {
    -webkit-transform:rotate(360deg);
  }
}
@keyframes myspin {
  from {
    transform:rotate(0deg);
  }

  to {
    transform:rotate(360deg);
  }
}

Loader CSS works in Chrome and Safari, not in IE or Firefox

2 Answers2