javascriptでボタン押した時にローディング画像表示(CSS変更するのも面倒くさい人向け)

はじめに

　完全に後付でCSSとか使わずに(面倒くさいから)、いい感じにhtmlに画像表示するのに、あっちこっち検索したので備忘録的に作成。
　基本的にCSS使ったいい感じのサンプルたくさんあるので、そっち使った方がいいです。
　CSS変更できないけどjavascriptは変更できる環境の人向け(そんな人居るのか？)。

　ローディングのgif画像は各自用意してください。

ソースコード

javascriptの一番下にでもコピペしてください。
jquery使ってます。

$(function() {
  var $btnLoading = $('.btn_loading');
  $btnLoading.on('click' ,function(){
    setTimeout(function(){
        $('body').prepend('<div class="loading" style="display:flex; width:100vw; height:100vh; background-color: rgba(0,0,0,0.6); position:absolute; align-items:center; justify-content:center;"><img src="loading.gif"></div>');
    },100);
  });
});

ローディング画像挟みたいボタンに"btn_loading"のクラスを追加。

<input type="submit" value="OK" class="btn_loading">

簡単解説

<div class="ajax-loader" 
         style="display:flex; 
                    width:100vw;
                    height:100vh;
                    background-color:rgba(0,0,0,0.6);
                    position:absolute;
                    align-items:center;
                    justify-content:center;">
<img src="loading.gif">
</div>

bodyの一番上にウィンドウ全体透過度60%の黒の重なるdiv要素を追加してます。
あとgif画像を　"display:flex; align-items:center; justify-content:center;"　で上下左右の中央に表示するようにしてます。(これが地味にハマった)