Table of contents

Bootstrap 5 Waitingfor Loading Modal

Bootstrap waitingfor is a lightweight plugin for Bootstrap 5 with progress bar components.


Useful to display the loading while requesting to the server-side using ajax.


bootstrap waitingfor loading modal



$ npm install bootstrap-waitingfor

# Bower
$ bower install bootstrap-waitingfor


If you're not using NPM and Bower to install bootstrap waitingfor. Just visit their repo here and download it.


Then use the files inside the build/ directory, which you can see these files:



Then load it to your HTML file. Check my example source code with bootstrap 5 integration.

<!doctype html>
<html lang="en">
  	<title>Bootstrap 5 Waitingfor Loading Modal with Progress bar jQuery Plugin</title>

  	<!-- Bootstrap CSS -->
	<link href="" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<div class="container">
		<h3>Simple dialog</h3>

        <button type="button" class="btn btn-primary" id="simple-dialog">Show dialog</button>


        <h3>Dialog with custom message</h3>
        <pre>'Custom message');</pre>
        <button type="button" class="btn btn-success" id="dialog-custom-message">Show dialog</button>

        <h3>Dialog with custom settings</h3>
        <pre>'Custom message', {dialogSize: 'sm', progressType: 'warning'});</pre>
        <button type="button" class="btn btn-warning" id="dialog-custom-settings">Show dialog</button>
        <h3>Dialog with some callback firing after it was hidden</h3>
        <pre>'Dialog with callback on hidden',{onHide: function () {alert('Callback!');}});</pre>
        <button type="button" class="btn btn-danger" id="dialog-custom-callback">Show dialog</button>

	<!-- Must put our javascript files here to fast the page loading -->
	<!-- jQuery library -->
	<script src=""></script>
	<!-- Bootstrap JS -->
	<script src="" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
	<!-- Bootstrap Waiting For Script -->
	<script src="assets/plugins/bootstrap-waitingfor/bootstrap-waitingfor.min.js"></script>

	<!-- Page Script -->
	<script src="assets/js/scripts.js"></script>



Basic functions

1. Simple dialog

$('#simple-dialog').on('click', function() {;
	setTimeout(function () {
	}, 3000);


2. Dialog with custom message

$('#dialog-custom-message').on('click', function() {'Custom message');
	setTimeout(function () {
	}, 2000);


3. Dialog with custom settings

$('#dialog-custom-settings').on('click', function() {'Custom message', {
		dialogSize: 'sm', 
		progressType: 'warning'

	setTimeout(function () {
	}, 2000);


4. Dialog with some callback firing after it was hidden

$('#dialog-custom-callback').on('click', function() {'Dialog with callback on hidden',{
		onHide: function () {

	setTimeout(function () {
	}, 2000);


I hope it helps thank you for reading. Just download the below source code and test it.




Enjoy :)