[SVG] loadingアニメーション #leader
こんにちわ。
LCCの飛行機搭乗料金が安い安いと聞いてはいましたが、jetstar社が特別イベントで「国内線90円セール」というのをやっているのを見て、もはや電車やバスよりも安い値段で飛行機に乗れる時代が来たことを知った下駄です。
関東であれば、成田空港から、地方の空港までの運賃が90円なんですが、実際には、カード支払いの手数料や、なんかしたらの料金が加わって3000円弱ぐらいにはなってしまいますが、それでも、千葉に住んでいる人じゃなければ、成田空港に行く電車賃の方が高くなってしまう人も多いのではないでしょうか？
複雑な気分になりそうですが、それでも、格安飛行機料金は魅力ですね。
用事が無くても買ってしまいそうです・・・
loadingアニメ「leader」
svgでのloadingアニメ素材にハマってしまい、日々gif画像やcssアニメなどを見つけては、svgに移植しているのがすっかり趣味になってしまいましたが、
今回作ったloading素材は、「leader」というタイプのもので、３点リーダーっぽい見た目で読み込み中を印象づけることができる、かなりスタンダードなモノです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<svg class="leader" width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <style> svg.leader circle{ fill:#1DA9F1; animation: anim-leader 0.9s ease-in-out infinite; } svg.leader circle.leader-1{ transform-origin:10px 32px; animation-delay: 0s; } svg.leader circle.leader-2{ transform-origin:32px 32px; animation-delay: 0.3s; } svg.leader circle.leader-3{ transform-origin:54px 32px; animation-delay: 0.6s; } @keyframes anim-leader{ 0% {transform:scale(1.0);} 30% {transform:scale(1.0);} 65% {transform:scale(2.0);} 100% {transform:scale(1.0);} } </style> <g> <circle class="leader-1" cx="10" cy="32" r="4"></circle> <circle class="leader-2" cx="32" cy="32" r="4"></circle> <circle class="leader-3" cx="54" cy="32" r="4"></circle> </g> </svg> |
ソースコード事態もシンプルで、内容に関しての解説はしなくても問題ないでしょう。
実際にサンプルを見てもらったほうがわかりやすいですね。
プレビュー
See the Pen
svg-loading leader by YugetaKoji (@geta1972)
on CodePen.
追加情報
svgアニメ素材と言っても中身はcssアニメなので、それほど難しい事をやっているつもりはないのですが、imgタグのsrc属性でファイルを指定して使っていると、どうしても色味を替えたいとか、アニメーションスピードを替えたいという要望が出てくると思います。
そんな時は、以前に公開した、「svgControl.js」を使ってもらうと、普通にページ内のcss操作で、色やアニメタイミングなどを変更することが可能になります。
[Javascript-Tool] imgで読み込んだsvgファイルをcssでコントロールできる「svgControl.js」
素材と合わせてお使いください。