Question 280894 in Html Question posted in
Some basic documentation can be found here.

Html – 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?

Tags:

2

Answers


  1. 0

    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/[email protected]/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/[email protected]/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    Login or Signup to reply.
  2. 0

    To stop the animation you can set the iteration count to 0

    document.getElementById("spinner").style.animationIterationCount = 0

    To continue the animation simply set it back to its original value

    document.getElementById("spinner").style.animationIterationCount = 'Infinite'
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search