0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-01-17

#はじめに
 完全に後付で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;" で上下左右の中央に表示するようにしてます。(これが地味にハマった)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?