Bootstrap waitingfor là một plugin nhẹ cho Bootstrap 5 với các thành phần thanh tiến trình.Nó hữu ích để hiển thị tiến trình đang tải trong khi yêu cầu phía máy chủ bằng cách sử dụng ajax. Để tải plugin này các bạn tải tại đây
Thanh tiến trình trong Bootstrap 5 cơ bản
Để tạo thanh tiến trình trong Bootstrap 5 với plugin Bootstrap waitingfor bạn xem ví dụ cụ thể dưới đây
Ví dụ
<!doctype html>
<html lang="en">
<head>
<title>Tạo thanh tiến trình trong Bootstrap 5</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<br/><br/><br/>
<div class="container">
<h3>Simple dialog</h3>
<pre>waitingDialog.show();</pre>
<button type="button" class="btn btn-primary" id="simple-dialog">Show dialog</button>
<br/><br/>
<h3>Dialog with custom message</h3>
<pre>waitingDialog.show('Hướng dẫn tạo thanh tiến trình trong Bootstrap 5');</pre>
<button type="button" class="btn btn-success" id="dialog-custom-message">Show dialog</button>
<br/><br/>
<h3>Dialog with custom settings</h3>
<pre>waitingDialog.show('Custom message', {dialogSize: 'sm', progressType: 'warning'});</pre>
<button type="button" class="btn btn-warning" id="dialog-custom-settings">Show dialog</button>
<br/><br/>
<h3>Dialog with some callback firing after it was hidden</h3>
<pre>waitingDialog.show('Dialog with callback on hidden',{onHide: function () {alert('Callback!');}});</pre>
<button type="button" class="btn btn-danger" id="dialog-custom-callback">Show dialog</button>
</div>
<!-- Must put our javascript files here to fast the page loading -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Bootstrap Waiting For Script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-waitingfor/1.2.9/bootstrap-waitingfor.min.js"></script>
<!-- Page Script -->
<script type="text/javascript">
/*1. Hộp thoại đơn giản*/
$('#simple-dialog').on('click', function() {
waitingDialog.show();
setTimeout(function () {
waitingDialog.hide();
}, 3000);
});
/*2. Hộp thoại với tin nhắn tùy chỉnh*/
$('#dialog-custom-message').on('click', function() {
waitingDialog.show('Hướng dẫn tạo thanh tiến trình trong Bootstrap 5');
setTimeout(function () {
waitingDialog.hide();
}, 2000);
});
/*3. Hộp thoại với cài đặt tùy chỉnh*/
$('#dialog-custom-settings').on('click', function() {
waitingDialog.show('Custom message', {
dialogSize: 'sm',
progressType: 'warning'
});
setTimeout(function () {
waitingDialog.hide();
}, 2000);
});
/*4. Hộp thoại với một số lệnh gọi lại kích hoạt sau khi nó bị ẩn*/
$('#dialog-custom-callback').on('click', function() {
waitingDialog.show('Dialog with callback on hidden',{
onHide: function () {
alert('Callback!');
}
});
setTimeout(function () {
waitingDialog.hide();
}, 2000);
});
</script>
</body>
</html>Thanh tiến trình trong Bootstrap 5 kết hợp PHP Ajax
Chúng ta sử dụng các hàm beforeSend() và complete() trong ajax để kích hoạt và hiển thị phương thức chờ tải bằng hàm beforeSend() và phát hiện xem ajax đã hoàn tất yêu cầu máy chủ bằng hàm complete() hay chưa .
Ví dụ
<!doctype html>
<html lang="en">
<head>
<title>PHP Ajax with Bootstrap 5 Waitingfor Loading Modal with Progress bar jQuery Plugin</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<br/><br/><br/>
<div class="container">
<h3>Simple Dialog with Ajax</h3>
<pre>waitingDialog.show();</pre>
<button type="button" class="btn btn-primary" id="ajax-with-simple-dialog">Submit Request</button>
<br/><br/>
</div>
<!-- Must put our javascript files here to fast the page loading -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Bootstrap Waiting For Script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-waitingfor/1.2.9/bootstrap-waitingfor.min.js"></script>
<!-- Page Script -->
<script type="text/javascript">
$(document).ready(function() {
$('#ajax-with-simple-dialog').on('click', function() {
var $this = $(this); //ID của nút gửi dữ liệu
// Ajax config
$.ajax({
type: "POST", //sử dụng phương thức POST để gửi dữ liệu đến server
url: 'server.php', // tệp tin gửi dữ liệu
beforeSend: function () {//Chúng tôi thêm điều này trước khi gửi để vô hiệu hóa nút sau khi chúng ta gửi nó để chúng ta ngăn chặn nhiều lần nhấp
waitingDialog.show('Ajax đang xử lý...', {
onShow: function() {
$this.attr('disabled', true);
},
onHide: function() {
$this.attr('disabled', false);
}
});
},
success: function (response) {//khi yêu cầu được xử lý thành công ở phía máy chủ, nó sẽ trả về kết quả ở đây
},
complete: function() {
waitingDialog.hide();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// Bạn có thể đặt một cái gì đó ở đây nếu có lỗi từ yêu cầu đã gửi
}
});
});
});
</script>
</body>
</html>Tệp server.php
Ví dụ
<?php
echo 'server';
?>Hy vọng qua hướng dẫn này các bạn đã biết cách tạo thanh tiến trình trong Bootstrap 5