skip to Main Content

When the button is clicked, I want the spiners to appear for 3 seconds and then disappear. i can make

visible but cant make invisible again

function stoploading() {
  document.getElementById('loading').style.visibility = 'visible';
}
<button class="btn btn-danger d-inline-flex align-items-center" type="button">ATTACK</button>

<div class="col text-white m-5 px-5">
  <div id="loading" class="spinner-border text-primary load_icon" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

2

Answers


  1. So I created a <button> and a function startLoading()that removes the "Loading…" after 3 seconds.

    <button onclick="startLoading()">Click</button>
    
    <script>
        function startLoading() {
            // Make he spinner visible
            document.getElementById('loading').style.visibility = 'visible';
    
            // Set a timeout to hide the spinner after 3 seconds
            setTimeout(function() {
                stopLoading();
            }, 3000);
        }
    
        function stopLoading() {
            // Make the spinner invisible
            document.getElementById('loading').style.visibility = 'hidden';
        }
    </script>
    
    <div class="col text-white m-5 px-5">
        <div id="loading" class="spinner-border text-primary load_icon" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    Login or Signup to reply.
  2. you may apply hidden style to loading after 3 second

    <button onclick="stoploading()">
        ATTACK
    </button>
    
    <script>
        function stoploading() {
            // Make the spinner visible
            document.getElementById('loading').style.visibility = 'visible';
    
            // Set a timeout to 3 seconds
            setTimeout(function () {
                document.getElementById('loading').style.visibility = 'hidden';
            }, 3000); 
        }
    </script>
    
    <div class="col text-white m-5 px-5">
        <div id="loading" class="spinner-border text-primary load_icon" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    

    or you can also use classList.add(‘visible’); and classList.remove(‘visible’); to have same effects

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search