CSSとJavaScriptでローディング画像を画面中央に表示する方法

最終更新日


Ajax的な動作(?)をするページを作っていると、マウスのクリックから処理が終了するまでの間は、ページが切り替わらないので本当に動いているのかと不安になります。

そこでクルクル回るローディング画像の出番です。

今回は、ライブラリなどは使わずに最低限のコードでローディング画像を表示してみました。


HTML

<div id="loading" class="hidden">
	<img src="/img/icon_loader_88.gif" width='88' height='88' alt="loading">
</div>

CSS

#loading img {
	position: fixed;
	top: 45%;
	left: 45%;
	opacity: 0.5;
}
.hidden {
	display: none;
}

JavaScript

//---ローディング画像(表示)
document.getElementById('loading').classList.remove('hidden');
//---ローディング画像(非表示)
document.getElementById('loading').className = 'hidden';

ローディング画像


初期状態ではCSSのclassで「hidden」を指定して非表示にしておいて、マウスクリックなどをトリガーにして「hidden」を除去してローディング画像を表示し、処理の終了時点で再度非表示「hidden」にします。

簡単に実行できるのでサンプルページはありませんが、画面の中央付近に半透明のローディング画像が表示されるはずです!

スポンサーリンク

シェアする