Click on the button to block this card, this function can be used on any other element too.
<div class="card" id="blockui-card-1">
...
</div>
<button id="blockui-1" class="btn btn-primary">Block Card</button>
$('#blockui-1').on('click', function() {
$('#blockui-card-1').block({
message: '<div class="spinner-grow text-primary" role="status"><span class="visually-hidden">Loading...</span><div>',
timeout: 2000
});
});
Click on the button to block the whole page, you can set the block timeout from javascript.
<button id="blockui-2" class="btn btn-primary">Block Page</button>
$('#blockui-2').on('click', function() {
$.blockUI({
message: '<div class="spinner-grow text-primary" role="status"><span class="visually-hidden">Loading...</span><div>',
timeout: 2000
});
});