I wanted to customise a nice spinner in CSS to indicate loading and it works nicely and looks great in everything except for Mozilla. Can anyone explain to me why, and how to fix it? Or at least point me in the right direction.
<style>
.loader {
display: inline-flex;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
outline: none;
position: relative;
animation: rotate 1s linear infinite
}
.loader::before {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 0.15em solid;
animation: prixClipFix 1.8s linear infinite;
}
:is(h1, h2, h3, h4, h5) .loader::before {
border-width: 0.1em;
}
@keyframes rotate {
100% {
transform: rotate(360deg)
}
}
@keyframes prixClipFix {
0% {
clip-path: polygon(50% 50%, 0 0, 10% 0, 10% 0, 10% 0, 10% 0)
}
25% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
}
50% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
}
75% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
}
100% {
clip-path: polygon(50% 50%, 0 0, 10% 0, 10% 0, 10% 0, 10% 0)
}
}
</style>
<div>
<!-- <div class="spin"></div> -->
<h1>Loading
<div class="loader"></div>
</h1>
<h2>Loading
<div class="loader"></div>
</h2>
<h3>Loading
<div class="loader"></div>
</h3>
<h4>Loading
<div class="loader"></div>
</h4>
<h5>Loading
<div class="loader"></div>
</h5>
Loading
<div class="loader"></div>
</div>仔细看看，我发现，当多边形增长和收缩时，FF并不喜欢div旋转.关闭其中任何一个都可以解决问题，但我希望它同时关闭这两个功能.