-1

I implemented this nice little css-based loader I found and then realized it doesn't work on IE (I tried IE11). I thought maybe it needed the vendor specific prefixes, so I tried using an online autoprefixer using 'last 2 versions' as the filter and it adds '-webkit-' prefixes but not the '-ms-' which makes me wonder if there something wrong with the way the css code is written that makes the '-ms-' prefixes not show up. I tried manually replacing the '-webkit-' with '-ms-' but it still doesn't work on IE.

What is preventing this from working on IE? Does the vendor prefixing have anything to do with it or not?

I haven't tried on any browser other than Chrome and IE at this point but would like to make it work on all major browsers last 2 versions if that is reasonable.

Original CSS - works great on Chrome but not on IE:

.page-loader{ background: #f9f9f9 none repeat scroll 0 0;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9998;}
.loader {
    height: 8px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: 50%;
    width: 44px;
}
.dot {
    background: #ccc none repeat scroll 0 0;
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    position: absolute;
    width: 10px;
}
.dot_1 {
    animation: 1.5s linear 0s normal none infinite running animateDot1;
    background: #f26f29 none repeat scroll 0 0;
    left: 12px;
}.dot_2 {
    animation: 1.5s linear 0.5s normal none infinite running animateDot2;
    left: 24px;
}.dot_3 {
    animation: 1.5s linear 0s normal none infinite running animateDot3;
    left: 12px;
}.dot_4 {
    animation: 1.5s linear 0.5s normal none infinite running animateDot4;
    left: 24px;
}
 @keyframes animateDot1 {
0% {
    transform: rotate(0deg) translateX(-12px);
}
25% {
    transform: rotate(180deg) translateX(-12px);
}
75% {
    transform: rotate(180deg) translateX(-12px);
}
100% {
    transform: rotate(360deg) translateX(-12px);
}
}
@keyframes animateDot2 {
0% {
    transform: rotate(0deg) translateX(-12px);
}
25% {
    transform: rotate(-180deg) translateX(-12px);
}
75% {
    transform: rotate(-180deg) translateX(-12px);
}
100% {
    transform: rotate(-360deg) translateX(-12px);
}
}
@keyframes animateDot3 {
0% {
    transform: rotate(0deg) translateX(12px);
}
25% {
    transform: rotate(180deg) translateX(12px);
}
75% {
    transform: rotate(180deg) translateX(12px);
}
100% {
    transform: rotate(360deg) translateX(12px);
}
}
@keyframes animateDot4 {
0% {
    transform: rotate(0deg) translateX(12px);
}
25% {
    transform: rotate(-180deg) translateX(12px);
}
75% {
    transform: rotate(-180deg) translateX(12px);
}
100% {
    transform: rotate(-360deg) translateX(12px);
}
}
Streamline
  • 2,040
  • 4
  • 37
  • 56

1 Answers1

1

Perhaps try removing the running values from your animation properties. This makes the animation work for me in IE11.

I see that there's some discussion of this issue here:
"CSS3 animation is not working in IE11 but works in other browsers"

Denis McDonald
  • 61
  • 5
  • Thanks Denis - that seemed to fix it when I tried that modification of removing the `running` values and just with the original css, without adding the vendor specific prefixes. Should the concept of adding vendor specific prefixes just be ignored for this particular block of css code? – Streamline Jul 05 '19 at 17:26
  • Glad I could help! (It was educational for me too.) With respect to the prefix question, you needn't worry about `ms-transform` or `@-ms-keyframes` for the reasons contained in [this answer](https://stackoverflow.com/questions/28545533/how-should-you-prefix-transform-properties-in-css3-animations/28546443#28546443), which also addresses why it'd be advisable to use the `webkit` prefixes that Autoprefixer supplied. – Denis McDonald Jul 06 '19 at 03:46