[SVG] loadingアニメーション #antenna-bar
こんにちわ。
甘いものには目がない下駄です。
三時のおやつにコーヒーとチョコレートは欠かせないし、あんこ、クリーム、甘味処は嫌いなものも苦手なものも一切なく、同時に気を抜くとブクブクと太っていく為、日々カロリーとの戦いでもあります。
さあて、今日もジョギングに勤しみましょう。
Antenna-Bar-loading
本日のsvgは、なんとなく携帯のアンテナに似ている棒状のアニメーションです。
せわしなく動いているのがLoading表示に最適ですね。
|
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 33 34 35 36 37 |
<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.
今回の素材は、解説する要素は少ないので、気になる箇所、教えてほしい箇所があれば、メールまたはコメントでお聞きくださいませ。