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」にします。
簡単に実行できるのでサンプルページはありませんが、画面の中央付近に半透明のローディング画像が表示されるはずです！