The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser.
Read the official Block UI Documentation for a full list of instructions and other options.
In order to use BlockUi on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/spinkit/spinkit.css" />Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/block-ui/block-ui.js"></script>Example
Block UI's usage is very simple; to block user activity for the page, all you have to do is initialize it using $(".your-class").block();. Refer below mentioned code for more options.
You can use any spinner you want, check out spinner options from here.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quibusdam pariatur nisi recusandae dolorem sed, explicabo, aut, inventore obcaecati exercitationem ut qui molestias libero dicta perspiciatis officiis porro ab delectus?
<div class="card">
<div class="card-header">
<h5 class="mb-0">Block Ui</h5>
</div>
<div class="card-body" id="card-block">
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero
quibusdam pariatur nisi recusandae dolorem sed, explicabo, aut,
inventore obcaecati exercitationem ut qui molestias libero dicta
perspiciatis officiis porro ab delectus?
</p>
<div class="block-ui-btn mt-6">
<button class="btn btn-primary btn-card-block me-2 mb-2">
Default
</button>
<button
class="btn btn-primary btn-card-block-overlay me-2 mb-2"
>
Overlay Color
</button>
<button
class="btn btn-primary btn-card-block-spinner me-2 mb-2"
>
Custom Spinner
</button>
<button class="btn btn-primary btn-card-block-custom me-2 mb-2">
Custom Message
</button>
<button class="btn btn-primary btn-card-block-multiple mb-2">
Multiple Message
</button>
</div>
</div>
</div>/* Extended UI - Block UI */
$(function() {
// DEFAULT
$(".btn-card-block").on("click", function() {
$("#card-block").block({
message: '<div class="spinner-border text-primary" role="status"></div>',
timeout: 1000,
css: {
backgroundColor: "transparent",
border: "0"
},
overlayCSS: {
backgroundColor: "#000",
opacity: 0.25
}
})
})
// OVERLAY COLOR
$(".btn-card-block-overlay").on("click", function() {
$("#card-block").block({
message: '<div class="spinner-border text-primary" role="status"></div>',
timeout: 1000,
css: {
backgroundColor: "transparent",
border: "0"
},
overlayCSS: {
backgroundColor: "#fff",
opacity: 0.8
}
})
})
// CUSTOM SPINNER
$(".btn-card-block-spinner").on("click", function() {
$("#card-block").block({
message:
'<div class="sk-wave sk-primary mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
timeout: 1000,
css: {
backgroundColor: "transparent",
border: "0"
},
overlayCSS: {
backgroundColor: "#fff",
opacity: 0.8
}
})
})
// CUSTOM MESSAGE
$(".btn-card-block-custom").on("click", function() {
$("#card-block").block({
message:
'<div class="d-flex justify-content-center"><p class="me-2 mb-0">Please wait...</p> <div class="sk-wave sk-primary m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
timeout: 1000,
css: {
backgroundColor: "transparent",
border: "0"
},
overlayCSS: {
backgroundColor: "#fff",
opacity: 0.8
}
})
})
// MULTIPLE MESSAGE
$(".btn-card-block-multiple").on("click", function() {
$("#card-block").block({
message:
'<div class="d-flex justify-content-center"><p class="me-2 mb-0">Please wait...</p> <div class="sk-wave sk-primary m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
css: {
backgroundColor: "transparent",
border: "0"
},
overlayCSS: {
backgroundColor: "#fff",
opacity: 0.8
},
timeout: 1000,
onUnblock: function() {
$("#card-block").block({
message: '<p class="me-2 mb-0">Almost Done...</p>',
timeout: 1000,
css: {
backgroundColor: "transparent",
border: "0"
},
overlayCSS: {
backgroundColor: "#fff",
opacity: 0.8
},
onUnblock: function() {
$("#card-block").block({
message: '<div class="p-3 bg-success">Success</div>',
timeout: 500,
css: {
backgroundColor: "transparent",
border: "0"
},
overlayCSS: {
backgroundColor: "#fff",
opacity: 0.8
}
})
}
})
}
})
})
})