I'm working on displaying a spinner while loading modal content with the use of bootstrap v5 modal and jQuery. However, I encountered some issues in my example.
The spinner does not display again after closing the modal; it only shows for the first time.
$(window).on("load", function() {
if ($(".modal").length) {
$(".modal").modal("show");
$(".modal").on("shown.bs.modal", function(e) {
e.preventDefault();
if ($(".spinner").length) {
$(".spinner").delay(3000).fadeOut(500, function() {
$(this).remove();
});
}
});
$(document).on("click", ".btn", function(e) {
$(".modal").on("shown.bs.modal", function(e) {
e.preventDefault();
if ($(".spinner").length) {
$(".spinner").delay(3000).fadeOut(500);
}
});
$(".modal").on("hidden.bs.modal", function(e) {
e.preventDefault();
if ($(".spinner").length) {
$(".spinner").delay(3000).fadeOut(500);
}
});
});
}
});
Check out the live example here: https://codepen.io/themes4all/pen/oNWeYzp