ローディングアニメーション

制御装置が待ち状態にあるかどうかがきちんと表示される場合とそうでない場合はイライラ感に差が生まれます。

パソコンやスマホにおいて爆発的に利用者が集中した時には動作が重たくなります。その時、処理中などの告知を出すことがあります。

その処理は小負荷で実現可能なGIFファイルを利用するのが定番ですが動作を停止するには不向きです。準備中が完了したとき、アニメ動作を止めたいことがあります。今回、ここに焦点を当てます。

アニメ動作を停止する方法

GIF画像のアニメ動作を止めるには、GIF画像を制御するプラグインを利用する方法がありますが少し大掛かりになります。

ここでは簡便方法としてGIF画像同等の静止画像に切り替える方法を示します。

切り替えるタイミングで、該当するCSSを設定しなおす例を挙げます。

制御サンプルコード

8.6秒後にアニメ動作を停止する例です。

<p><img id="wait" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/01/loading-arrow.gif" width="240" height="240" style="opacity:1.0;"></p>
<script type="text/javascript" charset="utf-8">
  setTimeout(function(){							//回転を制御する関数, 8.6秒後に停止する処理
	document.getElementById("wait").src = "https://aidesign.lolipop.jp/wp-content/uploads/2021/01/loading240x240.png";
  },8600);											//delay
</script>

Result