Я реализовал этот прекрасный маленький загрузчик на основе css Я нашел, а затем понял, что он не работает в IE (я пробовал IE11). Я подумал, что, возможно, для этого нужны специфичные для поставщика префиксы, поэтому я попытался использовать сетевой автоматический префикс , используя в качестве фильтра «последние 2 версии», и он добавляет префиксы «-webkit-», но не «-ms-», который меня удивляет, если что-то не так с написанием кода CSS, из-за которого префиксы -ms- не отображаются. Я попытался вручную заменить '-webkit-' на '-ms-', но он все еще не работает в IE.
Что мешает этому работать в IE?
Связано ли это с префиксом поставщика?
На данный момент я не пробовал ни в одном браузере, кроме Chrome и IE, но хотел бы, чтобы это работало во всех основных браузерах последних двух версий, если это разумно.
Оригинальный CSS - отлично работает на Chrome, но не на 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);
}
}