◆ 表示されない部分が僅かに見える
◆ Firefox だと大丈夫

適当に手抜き感あるローディングぽいものを作りました
正方形を作って その中に border-radius を 50% にした円を作ってそれに border を指定して「◯」を書きます
その下半分を白色の div で覆って隠します
残った上半分に重なるように 2 つの白色の div をアニメーションで動かして「◯」の一部だけを見えるようにします
最後にこの正方形全体を回転させます

コードはこれです
プレビューできます

<!doctype html>

<div class="canvas">
<div class="round"></div>
<div class="left-cover"></div>
<div class="right-cover"></div>
<div class="bottom-cover"></div>
</div>

<style>
.canvas {
position: relative;
width: 200px;
height: 200px;
animation: animb 1s linear 0s infinite;
}
.round {
border-radius: 50%;
width: 100%;
height: 100%;
border: hsl(0deg, 100%, 60%) solid 20px;
box-sizing: border-box;
animation: animc 2s linear 0s infinite;
}
.left-cover {
height: 50%;
background: white;
position: absolute;
top: 0;
right: 0;
animation: anim1 1s linear 0s infinite;
}
.right-cover {
height: 50%;
background: white;
position: absolute;
top: 0;
left: 0;
animation: anim2 1s linear 0s infinite;
}
.bottom-cover {
height: 50%;
background: white;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
@keyframes animb {
0% { transform: rotate(0deg); }
100% { transform: rotate(180deg); }
}
@keyframes animc {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
@keyframes anim1 {
0% { left: 0; }
25% { left: 75%; }
100% { left: 100%; }
}
@keyframes anim2 {
0% { right: 100%; }
75% { right: 75%; }
100% { right: 0; }
}
</style>

これを Chrome で動かした結果ですが こうなりました

anim-gr-ch

静止画よりも動いてるのを見るほうがわかりやすいですが 関係ないところが一瞬表示されて見えて汚いです
ズームしてみるとこうなります
青色の丸のところになんかでてしまってます

anim-gr-ch-zm

transform で 3D 扱いさせればこういうのはなくなる場合があるらしいので試しましたが変わりませんでした
動きが速すぎるのかなと速度を 25% にしてみても表示されています
全体の回転アニメーションを止めると特に出ないのですけどね

Firefox でも試すと

anim-gr-fx

キレイに表示されてました
最近はあまり思うこともなかったのですが Firefox のほうが表示がきれいなんですよね