なのブログ

   

メンタル障害持ちながらA型就労で広告デザインやWebをしている人のブログ

SVGでローディングアニメーション

SVGはCSSアニメーションとほぼ同じようにしてアニメーションを設定できます。

以下の例は丸の大きさが徐々に変わっていくローディングアニメーションです。

CSSのinfiniteは無限ループです。デュレーションの値(infiniteの後)を書くことで3つのアニメーションを少しずつずらしています。

SVGは特別にローディングアニメーションに向いているわけではないようですが、こうやって触ってみると結構楽しいです。