運の良さは、待っている人よりも、攻めている人の方が比率が高いことに改めて気がついた、ユゲタです。
宝くじで考えると、いつも買っている人の方が当たる確率は高いですからね。
当たり前ですが、買わない人には当たりません。
今回のloadingアニメ素材は、非常にシンプルなモノです。
HTMLやればもっと簡単にできるんですが、svgでは、オブジェクトを２つ作ってグルーピングして、それぞれをアニメーションさせるという面倒くささですが、見た目はシンプルで悪くないので、比較的お気に入りです。
Source
<svg class="square" width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<style>
svg.square .roll{
transform-origin:32px 32px;
animation: anim-square-roll 2.0s ease infinite;
}
svg.square .box{
fill:white;
stroke : black;
stroke-width:4px;
}
svg.square .inner{
fill:black;
transform-origin:20px 20px;
animation: anim-square-inner 2.0s ease-in infinite;
}
@keyframes anim-square-roll{
0% {transform: rotate(0deg);}
25% {transform: rotate(180deg);}
50% {transform: rotate(180deg);}
75% {transform: rotate(360deg);}
100% {transform: rotate(360deg);}
}
@keyframes anim-square-inner{
0% {height: 0px;}
25% {height: 0px;}
50% {height: 24px;}
75% {height: 24px;}
100% {height: 0px;}
}
</style>
<g class="roll">
<rect class="box" x="18" y="18" width="28" height="28"></rect>
<rect class="inner" x="20" y="20" width="24" height="24"></rect>
</g>
</svg>
See the Pen svg-loading square-slide by YugetaKoji (@geta1972) on CodePen.
0 件のコメント:
コメントを投稿