[SVG] loadingアニメーション #antenna-bar

2019年11月22日

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

甘いものには目がない、ユゲタです。 三時のおやつにコーヒーとチョコレートは欠かせないし、あんこ、クリーム、甘味処は嫌いなものも苦手なものも一切なく、同時に気を抜くとブクブクと太っていく為、日々カロリーとの戦いでもあります。 さあて、今日もジョギングに勤しみましょう。

Antenna-Bar-loading

本日のsvgは、なんとなく携帯のアンテナに似ている棒状のアニメーションです。 せわしなく動いているのがLoading表示に最適ですね。 <svg class="antenna" width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> <style> svg.antenna rect{ fill:orange; animation: anim-antenna 0.8s ease-in-out infinite; } svg.antenna rect.antenna-1{ transform-origin:6px 32px; animation-delay: 0s; } svg.antenna rect.antenna-2{ transform-origin:23px 32px; animation-delay: 0.2s; } svg.antenna rect.antenna-3{ transform-origin:40px 32px; animation-delay: 0.4s; } svg.antenna rect.antenna-4{ transform-origin:57px 32px; animation-delay: 0.6s; } @keyframes anim-antenna{ 0% {transform:scaleY(1.0);} 30% {transform:scaleY(1.0);} 65% {transform:scaleY(2.0);} 100% {transform:scaleY(1.0);} } </style> <g> <rect class="antenna-1" x="2" y="24" width="8" height="24"></rect> <rect class="antenna-2" x="19" y="24" width="8" height="24"></rect> <rect class="antenna-3" x="36" y="24" width="8" height="24"></rect> <rect class="antenna-4" x="53" y="24" width="8" height="24"></rect> </g> </svg>

デモ

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

今回の素材は、解説する要素は少ないので、気になる箇所、教えてほしい箇所があれば、メールまたはコメントでお聞きくださいませ。

関連リンク

他のNowLoadingも見る

このブログを検索

ごあいさつ

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