SVGでベースとなる形を描く

円を作成する

まずはSVG要素を使ってスピナーの形の土台となる円を描画します。
SVG要素には様々な図形の小要素を指定できます。今回は円を描画するcircle要素を使用します。

circle要素には下記の属性があります。

• cx：円の中心の X 軸座標
• cy：円の中心の Y 軸座標
• r：円の半径
• fill：塗りつぶし色を指定

ここではfill属性にnoneを設定して塗りつぶしをなくし、CSSで線の色と幅を指定しました。

円を分割する

円の一部を欠けさせてCのような形にします。ここで使うのが破線を指定するstroke-dasharrayプロパティです。

stroke-dasharrayプロパティ

SVG要素の輪郭線を破線にするためのプロパティです。値には破線の長さと間隔をそれぞれ指定することができます。例えば破線の長さを10、間隔を2とした場合は以下のような破線の円ができます。

今回は円周の約8割にあたる長さを指定し、線の一部が描画されないようにすることでCを再現します。後述しますが、Safariに対応するために長さと間隔には同じ値を設定します。
stroke-dasharray: 115 115;

アニメーションを追加する

作成した図形にくるくる回るアニメーションを追加します。アニメーションは一度に考えると複雑に感じますが、動きを分割して考えると理解しやすくなります。

以下二点に分けて説明していきます。

1. 要素を回転させる動き
2. 線を描画する動き

要素を回転させる

CSSでSVG要素にanimationを指定して@keyframesで動きを定義します。SVG要素自体を回転させる動きです。

線を描画する

ぐるっと線が描画されるような動きを作りたいです。ここで使用するのがstroke-dashoffsetプロパティです。

stroke-dashoffsetプロパティ

破線の描画開始位置を定義するプロパティです。この線の始点位置を0から-230(stroke-dasharrayに設定した値の倍)までアニメーションで動かすことによって、線が描画されるような動きをつける事ができます。

0から230にすると描画の向きが変わります。

Safariでの注意点

Safariでは今回のようにstroke-dashoffsetに負の値を指定すると、描画の方向が反転するなど不具合が起きてしまいます。
これを回避するため、stroke-dasharrayには破線の長さと間隔は同じ値を指定する必要があります。同じ値を設定することで、Safariが均等なダッシュパターンを解釈することができ、視覚的に不具合を減らす効果があります。

完成

要素を回転させる動きと線を描画させる動きを合体させたのがこちらのコードです。
ローディング画面らしいスピナーの動きができました！

まとめ

今回はSafariでアニメーションの不具合が起きて苦戦しました。同じ問題に詰まった方のご参考になれば幸いです。
最後までお読みいただきありがとうございました！

参考

<circle> – SVG: スケーラブルベクターグラフィック | MDN
stroke-dasharray – SVG: スケーラブルベクターグラフィック | MDN
stroke-dashoffset – SVG: スケーラブルベクターグラフィック | MDN
SVG animation direction wrong in Safari only – Denis Bouquet