[SVG] loadingアニメーション #square-slide

2019年11月30日

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

運の良さは、待っている人よりも、攻めている人の方が比率が高いことに改めて気がついた、ユゲタです。 宝くじで考えると、いつも買っている人の方が当たる確率は高いですからね。 当たり前ですが、買わない人には当たりません。 今回のloadingアニメ素材は、非常にシンプルなモノです。 HTMLやればもっと簡単にできるんですが、svgでは、オブジェクトを2つ作ってグルーピングして、それぞれをアニメーションさせるという面倒くささですが、見た目はシンプルで悪くないので、比較的お気に入りです。

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.

関連リンク

他のNowLoadingも見る

このブログを検索

ごあいさつ

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