CSS3微调器不适用于IE 11

Question

please can someone help me I don't know why my spinner loader not working on IE 11, I have double checked on Google and forums but without any result thanks for the help in advance this is my CSS code :

<style>
#busybox {
}

#busybox div {
    top: calc(50% - 45px);
    left: calc(50% - 45px);
    position: fixed;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid {{spinnerColor}};
    border-left-color: transparent;
    border-right-color: transparent;
    z-index: 1000;
}

animation: busybox_kf 1s linear 0s infinite normal none running;
}

@keyframes busybox_kf {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes busybox_kf {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

Answer 1

Use -webkit-transform or -ms-transform for various versions of IE. The MDN page for transform property mentions the support level for the various IE versions.

@keyframes busybox_kf {
    0% { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg) } /* same approach for remaining rules below */
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes busybox_kf {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}