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

2019年11月16日

テクノロジー プログラミング

t f B! P L
人の事をとやかく言うけど、自分の事はとやかく言って欲しくない、ユゲタです。 WEBサービス開発で、必ず使うと言ってもいいLoadingアニメーションですが、svgファイル読み込むだけでgifファイルのようにアニメってくれないかな〜と考えていたら、svgの中にstyleが書けるという事を思い出しました。 animation指定すれば、アニメってくれるのではないかと思って試してみたら、まあまあうまく出来たので、その成果を掲載しておきます。 また、普通に使えそうな、パターンを2つ紹介しておきますので、お気に入りをコピペして使ってくださいませ。

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

<svg class="circle" width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <style> svg.circle { } svg.circle > g > g{ position:relative; } svg.circle > g > g > circle{ position:absolute; fill : black; cx : 0px; cy : 0px; transform:translateY(-26px); animation: anim-circle-dot 0.9s ease-in-out infinite; } svg.circle > g > g:nth-child(1){ transform:translate(32px, 32px) rotate(0deg); } svg.circle > g > g:nth-child(1) > circle{ animation-delay: 0s; } svg.circle > g > g:nth-child(2){ transform:translate(32px, 32px) rotate(40deg); } svg.circle > g > g:nth-child(2) > circle{ animation-delay: -0.8s; } svg.circle > g > g:nth-child(3){ transform:translate(32px, 32px) rotate(80deg); } svg.circle > g > g:nth-child(3) > circle{ animation-delay: -0.7s; } svg.circle > g > g:nth-child(4){ transform:translate(32px, 32px) rotate(120deg); } svg.circle > g > g:nth-child(4) > circle{ animation-delay: -0.6s; } svg.circle > g > g:nth-child(5){ transform:translate(32px, 32px) rotate(160deg); } svg.circle > g > g:nth-child(5) > circle{ animation-delay: -0.5s; } svg.circle > g > g:nth-child(6){ transform:translate(32px, 32px) rotate(200deg); } svg.circle > g > g:nth-child(6) > circle{ animation-delay: -0.4s; } svg.circle > g > g:nth-child(7){ transform:translate(32px, 32px) rotate(240deg); } svg.circle > g > g:nth-child(7) > circle{ animation-delay: -0.3s; } svg.circle > g > g:nth-child(8){ transform:translate(32px, 32px) rotate(280deg); } svg.circle > g > g:nth-child(8) > circle{ animation-delay: -0.2s; } svg.circle > g > g:nth-child(9){ transform:translate(32px, 32px) rotate(320deg); } svg.circle > g > g:nth-child(9) > circle{ animation-delay: -0.1s; } @keyframes anim-circle-dot{ 0%{opacity:0.0;} 10%{opacity:1.0;} 90%{opacity:0.0;} 100%{opacity:0.0;} } </style> <g> <g><circle r="6"></circle></g> <g><circle r="6"></circle></g> <g><circle r="6"></circle></g> <g><circle r="6"></circle></g> <g><circle r="6"></circle></g> <g><circle r="6"></circle></g> <g><circle r="6"></circle></g> <g><circle r="6"></circle></g> <g><circle r="6"></circle></g> </g> </svg>

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

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

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

<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <style> svg.spinner { animation: rotator 1.4s linear infinite; } @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(270deg); } } svg.spinner > .path { stroke-dasharray: 187; stroke-dashoffset: 0; transform-origin: center; animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite; } @keyframes colors { 0% { stroke: #4285F4; } 25% { stroke: #DE3E35; } 50% { stroke: #F7C223; } 75% { stroke: #1B9A59; } 100% { stroke: #4285F4; } } @keyframes dash { 0% { stroke-dashoffset: 187; } 50% { stroke-dashoffset: 47; transform:rotate(135deg); } 100% { stroke-dashoffset: 187; transform:rotate(450deg); } } </style> <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle> </svg>

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

このバージョンは、最近色々なサービスで使われているのを見かけるのですが、codepenで他の人が紹介しているのを、svgに落とし込むように改造したバージョンです。 他にも使えそうなのがあれば、随時紹介していきますね。 お楽しみに!!!

参考サイト

https://codepen.io/mrrocks/pen/EiplA CSSだけで作るLoadingアニメーション#4

注意事項

重要なことを言い忘れていました。 今回のsvgデータは、IEでは動作しません。 使っている人も少ないかと思いますが、公開サービスを考えている人などは、ベンダープレフィックスなどが足りていないので、自己解決してお使いくださいませ。

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ