Bước 1: Chèn thẻ loading - html
<div class="processing-preview hidden">
</div>
Trong đó, hidden sử dụng để ẩn
Bước 2: Chèn CSS để ẩn hiện loadding và làm mờ màn hình
.processing-preview {
position: fixed;
left: 50%;
top: 50%;
z-index: 1;
width: 32px;
height: 32px;
background: url(../images/loading.gif) center no-repeat;
background-size: contain;
}
.submit-progress-bg {
background-color: lightgray;
opacity: .5;
}
Chú ý: Kiếm ảnh loadding.gif chèn vào thư mục tương ứng
Bước 3: Gọi hàm javascript tại button cần thực thi
<input type="submit" onclick="return DisplayProgressMessage(this, 'Searching...');" class="btn btn-danger" value="Tìm kiếm" />
Bước 4: Viết hàm Javascript để xử lý sự kiện click
<script type="text/javascript">
function DisplayProgressMessage(ctl, msg) {
//if use the submit button, you can use event.preventDefault to prevent the default submit form behavior.
event.preventDefault();
// Turn off the "Save" button and change text
$(ctl).prop("disabled", true).val(msg);
// Gray out background on page
$("body").addClass("submit-progress-bg");
// Wrap in setTimeout so the UI can update the spinners
$(".processing-preview").removeClass("hidden");
//submit the form.
setTimeout(function () {
$("form").submit();
}, 5000);
return true;
}
</script>