如何在Internet Explorer 11中添加圆形加载栏CSS?

问题描述 投票:-1回答:1
  • 关键帧旋转CSS与IE不兼容
  • IE显示矩形而不是圆形
html css cross-browser spinner compatibility
1个回答
0
投票

这似乎是IE 11中圆形微调器的一种有效方法。

CSS:

div {
margin: 20px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px dotted blue; 
background: transparent;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;

animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-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);
}
}
© www.soinside.com 2019 - 2024. All rights reserved.