ボタンを押したらローディング(くるくる回るスピナー)を表示する(ローディング画像不要CSSのみ)

2018-11-26
管理画面でユーザーに画像をアップさせる際、実行ボタンの2度押しを防ぐために必要なローディングの表示。

特に苦労せず設置ができたので、コードを紹介します。ローディング自体はCSSで完結します。画像不要なのが今回のミソです。ボタンを押したらローディング発動の部分だけjqueryです。

[デモサンプル]

まずはbodyの下辺りにローディングのHTMLコードをコピペして、フォームのボタンに何らかのクラス名を付けてください。
<body>

    <!-- loding -->
    <div id="overlay">
        <div class="cv-spinner">
            <span class="spinner"></span>
        </div>
    </div>



<input type="button" class="btn" value="実行">

次はCSSに以下のコードをコピペしてください。
/********************************************
* Now Loading
********************************************/
#overlay{
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height:100%;
display: none;
background: rgba(0,0,0,0.6);
}
.cv-spinner {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.spinner {
width: 80px;
height: 80px;
border: 4px #ddd solid;
border-top: 4px #999 solid;
border-radius: 50%;
animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
.is-hide{
display:none;
}

最後にjqueryのコードをコピペしてください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(".btn").click(function(){
    $("#overlay").fadeIn(500);
});
</script>
↑現実的にこれだけのコードではローディングが延々と止まらないので活用できません。とりあえず動作確認の為のコードです。

実際は下記のようなコードで使うそうです。
<script>
$(".btn").on("click", function(){
    $(document).ajaxSend(function() {
        $("#overlay").fadeIn(500);
    });
    $.ajax({
        type: 'GET',
        success: function(data){
            console.log(data);
        }
    }).done(function() {
        setTimeout(function(){
            $("#overlay").fadeOut(500);
        },3000);
    });
    return false;
});
</script>
ajaxなんか使わないし、という方は下記のような分かりやすいコードがオススメです。
<script>
$(".btn").on("click", function(){
    $("#overlay").fadeIn(500);
    setTimeout(function(){
        $("#overlay").fadeOut(500);
        $("form").submit();
    },3000);
});
</script>