ボタンを押したらローディング(くるくる回るスピナー)を表示する(ローディング画像不要CSSのみ)
2018-11-26 614 1534管理画面でユーザーに画像をアップさせる際、実行ボタンの２度押しを防ぐために必要なローディングの表示。
特に苦労せず設置ができたので、コードを紹介します。ローディング自体は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>ajaxなんか使わないし、という方は下記のような分かりやすいコードがオススメです。
$(".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>
<!----><!----><script>
$(".btn").on("click", function(){
$("form").submit(); //フォーム実行
$("#overlay").fadeIn(500); //二度押しを防ぐloading表示
setTimeout(function(){
$("#overlay").fadeOut(500);
},3000);
});
</script>
