How can I show/hide a bootstrap spinner with jQuery?

user_11234800 0
Viewed 26250

I'm trying to show a bootstrap spinner after a click on a button and then hide it after getting a response from an API (basically a loading status).

My button is as follow:

<div class="col-6">
    <button type="button" name="btn-enviar" class="btn btn-primary w-100">
    <span class="spinner-border spinner-border-sm mr-3" id="spinner" role="status" aria-hidden="true">
    </span>Enviar</button>
</div>

So far I've tried to comment/uncomment my span tag with no luck, there would be an easier way to start/stop my spinner?

My comment/uncomment functions which I took from here and are not working (as requested):

function comment(element) {
    element.html('<!--' + element.html() + '-->')
}

function uncomment(element) {
    element.html(element.html().substring(4, element.html().length - 3))
}
bootstrap-4 jquery javascript
4 Answers

Html (with added class .spinner):

<div class="col-6">
    <button type="button" name="btn-enviar" class="btn btn-primary w-100">
    <span class="spinner spinner-border spinner-border-sm mr-3" id="spinner" role="status" aria-hidden="true">
    </span>Enviar</button>
</div>

Add css to css-file:

#spinner { display:none; } 
body.busy .spinner { display:block !important; }

Or use visibility:

#spinner { visibility:hidden; } 
body.busy .spinner { visibility:visible !important; }

JQuery:

$(document).ready( function()
{
  $('#spinner').on('click', function()
  {
    $('body').addClass('busy');
  });
});

When done, do:

$('body').removeClass('busy');

With a class like 'busy' added to the body of the html page, you can also do very nice things like blocking input elements and such without extra js code. Let CSS do all the work for you instead of js. You only have to add some extra CSS rules.

PS: Check your html for errors with html validator. If there are errors in the markup, strange things might happen or it doesn't work.

Have fun.

user_5652440

There are animation and -webkit-animation css attributes on the element.

Use a class like this

.stop {
 animation-name: none !important;
 -webkit-animation-name: none !important;
}

With JQuery you can toggle this class on the element. If it is added, the animation will stop.

Update This will show then hide the spinner. 

$(() => {
  $('button').on('click', e => {
    let spinner = $(e.currentTarget).find('span')
    spinner.removeClass('d-none')
    setTimeout(_ => spinner.addClass('d-none'), 2000)
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/components/spinners/">

<button class="btn btn-primary" type="button">
  <span class="d-none spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Click me...
</button>

user_61800310

I just faced the same problem and solved it with visibility style attribute.

HTML:

<span class="spinner-border spinner-border-sm" id="spinner" style="visibility: hidden"></span>

JS:

let spinner = document.getElementById("spinner");
spinner.style.visibility = 'visible'; //'hidden'
user_82438340

I didn't get your code exactly but I am putting my idea, you can try if feasible.

$(document).ready(function() {
  $("#spinner").spinner({
    start: function(event, ui) {
      $('#d1').html("Spinner has started ");
    },
    stop: function(event, ui) {
      $('#d1').html("Spinner has stopped ");
    }
  });
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/blitzer/jquery-ui.css" rel="stylesheet">
<input id="spinner" class='selector' value=12 size=3>
<div id=d1></div>

user_60193840
Related