甘いものには目がない、ユゲタです。
三時のおやつにコーヒーとチョコレートは欠かせないし、あんこ、クリーム、甘味処は嫌いなものも苦手なものも一切なく、同時に気を抜くとブクブクと太っていく為、日々カロリーとの戦いでもあります。
さあて、今日もジョギングに勤しみましょう。
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.
今回の素材は、解説する要素は少ないので、気になる箇所、教えてほしい箇所があれば、メールまたはコメントでお聞きくださいませ。
