<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="../public/plugins/bootstrap-5.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="../public/plugins/bootstrap-5.1.3/css/bootstrap.min.css" />
<style>
#loadingModal .modal-content {
border: none;
background-color: transparent;
}
</style>
</head>
<body>
<div class="modal" id="loadingModal" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="spinner-border text-light mx-auto" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
</body>
<script>
const loadingModal = new bootstrap.Modal(document.getElementById("loadingModal"), {
backdrop: "static",
keyboard: false,
});
setTimeout(() => {
loadingModal.show();
}, 3000);
setTimeout(() => {
loadingModal.hide();
}, 7000);
</script>
</html>
