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

2019年11月30日

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

t f B! P L
運の良さは、待っている人よりも、攻めている人の方が比率が高いことに改めて気がついた、ユゲタです。 宝くじで考えると、いつも買っている人の方が当たる確率は高いですからね。 当たり前ですが、買わない人には当たりません。 今回の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も見る

このブログを検索

プロフィール

自分の写真
町田市, 東京都, Japan
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出。

ブログ アーカイブ

QooQ