我正在使用此codepen中的材质微调器:https://codepen.io/mrrocks/pen/EiplA
它在IE以外的所有浏览器中都能完美显示。
这是SVG图标:
ARGC
然后我们让LESS旋转,以及所有这些:
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
根据caniuse.com:http://caniuse.com/#search=svg和http://caniuse.com/#feat=css-animation,我可以告诉我使用的所有内容似乎都支持IE11。
我尝试添加$offset: 187;
$duration: 1.4s;
.spinner {
animation: rotator $duration linear infinite;
}
@keyframes rotator {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
.path {
stroke-dasharray: $offset;
stroke-dashoffset: 0;
transform-origin: center;
animation:
dash $duration ease-in-out infinite,
colors ($duration*4) ease-in-out infinite;
}
@keyframes colors {
0% { stroke: #4285F4; }
25% { stroke: #DE3E35; }
50% { stroke: #F7C223; }
75% { stroke: #1B9A59; }
100% { stroke: #4285F4; }
}
@keyframes dash {
0% { stroke-dashoffset: $offset; }
50% {
stroke-dashoffset: $offset/4;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: $offset;
transform:rotate(450deg);
}
}
,但没有效果。
有什么想法吗?