アニメーションLoadingサンプル #svgファイル編

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
人の事をとやかく言うけど、自分の事はとやかく言って欲しくない下駄です。
 

WEBサービス開発で、必ず使うと言ってもいいLoadingアニメーションですが、
svgファイル読み込むだけでgifファイルのようにアニメってくれないかな〜と考えていたら、
svgの中にstyleが書けるという事を思い出しました。
 

animation指定すれば、アニメってくれるのではないかと思って試してみたら、まあまあうまく出来たので、その成果を掲載しておきます。
 

また、普通に使えそうな、パターンを2つ紹介しておきますので、お気に入りをコピペして使ってくださいませ。

スタンダードなCircleバージョン

 

See the Pen
svg-loading circle
by YugetaKoji (@geta1972)
on CodePen.


 

以前掲載たcssバージョンよりは、imgタグでsvgファイルを読み込むだけでアニメーション効果が出せるし、サイズも自由に変更できる為、使い勝手は抜群です。
 

見た目がきれいなspinnerバージョン

 

See the Pen
svg-loading spinner
by YugetaKoji (@geta1972)
on CodePen.


 

このバージョンは、最近色々なサービスで使われているのを見かけるのですが、codepenで他の人が紹介しているのを、svgに落とし込むように改造したバージョンです。
 

他にも使えそうなのがあれば、随時紹介していきますね。
お楽しみに!!!

参考サイト

https://codepen.io/mrrocks/pen/EiplA
 

CSSだけで作るLoadingアニメーション#4
 

注意事項

重要なことを言い忘れていました。
 

今回のsvgデータは、IEでは動作しません。
 

使っている人も少ないかと思いますが、公開サービスを考えている人などは、ベンダープレフィックスなどが足りていないので、自己解決してお使いくださいませ。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です