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);
}
}
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);
}
}