Search code examples
javascripthtmlcssbootstrap-4

Stop Bootstrap spinner to make it static and not spin

I'm using bootstrap 4. When an event begins, I can get the spinner to spin using the following:

<span class='spinner-border spinner-border-sm text-primary' role='status' aria-hidden='true' id='spinner' style='display: none'></span>

document.getElementById('spinner).style.display = 'inline-block';

But how do I stop it spinning? I don't want to hide the spinner because I want to display the static image. Is there any way to do that?

Solution

  • Solution

    The solution is quite simple. All you have to do is set animation to none:

    document.getElementById('spinner').style.animation = 'none';

    Demo

    Below is a code snippet to demo it. The spinner will stop after 2s of running.

    // Get the spinner element
var spinner = document.getElementById('spinner');

// Show the spinner
spinner.style.display = 'inline-block';

// Set a timeout of 2 seconds
setTimeout(function() {
  // Stop the spinner animation
  spinner.style.animation = 'none';
}, 2000);
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">



<span class='spinner-border spinner-border-sm text-primary' role='status' aria-hidden='true' id='spinner' style='display: none'></span>





<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

    Edits

    Edit #1: whole circle displays

    As I have said in comments, the spinner is not full circle in the first place. So a round about way is, when spinner has to be stopped, change the classist to of an icon of FontAwesome so that, the requested icon will show.

    To do that first include the cdn:

    <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" />

    In font awesome 6, circle icon is <i class="fa-regular fa-circle"></i>, so we replace the current className of spinner with 'fa-regular fa-circle' in JS.

    document.getElementById('spinner').className = "fa-regular fa-circle";

    Demo

    Here in demo, The spinner will stop after 2s of running and change icon (I have changed the icon to check and green color by text-success class - but you can use whatever you want, the process is same).

    Edit #2: Better way to handle animations

    As per the comment by @Yogi yeah the other solution is more sophisticated but I don't think that the @user1753640 wanted to restart animation, since he is asking for changing the icon to full circle at the end of spin. Still, if they do want to, then I also recommend to use spinner.style.animationIterationCount to stop and restart the spinner where the value of 0 stops and value of Infinite starts the animation.