Loader is fluctuating in IE 11 - css

Question

I have created a simple loader using css. Is's working fine in other browsers but its fluctuating in IE 11 / Edge.
Here I have one loader div in html:
<div class="loader"> </div>
Here is my css for loader:
body{
background:black;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 80px;
height: 80px;
-webkit-animation: spin 2s linear infinite; /* Safari 4+ */
-moz-animation: spin 2s linear infinite; /* Fx 5+ */
-o-animation: spin 2s linear infinite; /* Opera 12+ */
animation: spin 2s linear infinite;
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
Here is fiddle:
Fiddle

Answer 1

Try this
body{
background:black;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 80px;
height: 80px;
-webkit-animation: spin 2s linear infinite; /* Safari 4+ */
-moz-animation: spin 2s linear infinite; /* Fx 5+ */
-o-animation: spin 2s linear infinite; /* Opera 12+ */
-ms-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#keyframes spin{
0% {transform:rotateZ(0deg);}
100%{transform:rotateZ(360deg);}
}
#-webkit-keyframes spin{
0% {transform:rotateZ(0deg);}
100%{transform:rotateZ(360deg);}
}
#-moz-keyframes spin{
0% {transform:rotateZ(0deg);}
100% {transform:rotateZ(360deg);}
}
#-ms-keyframes spin{
0% {transform:rotateZ(0deg);}
100% {transform:rotateZ(360deg);}
}
#-o-keyframes spin{
0% {transform:rotateZ(0deg);}
100% {transform:rotateZ(360deg);}
}
Check it on fiddle