<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container p-3 shadow-sm">
<h3>Bootstrap Button Loading Spinner</h3>
<button class="btn btn-secondary" type="button" id="loadButton">
<span class="spinner-grow spinner-grow-sm" aria-hidden="true" id="spinner" style="display: none;"></span>
<span id="loadingText">Click me</span>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"
integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
crossorigin="anonymous"></script>
document.addEventListener("DOMContentLoaded", function () { var loadButton = document.getElementById("loadButton"); var spinner = document.getElementById("spinner"); var loadingText = document.getElementById("loadingText"); loadButton.addEventListener("click", function () { spinner.style.display = "inline-block";
loadingText.textContent = "Loading...";
spinner.style.display = "none";
loadingText.textContent = "Finished!";
}, 3000); // 3000 milliseconds = 3 seconds