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))
}

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))
}

• javascript
• jquery
• bootstrap-4

• Could you please add your javascript or jquery code here as well. – chandra prakash kabra Commented Oct 19, 2019 at 17:58
• Use a css classnames to hide and show spinner. – Codebeat Commented Oct 19, 2019 at 18:07
• @Codebeat I tried to do so with $('#spinner]').hide(); and $('#spinner]').show();, and it doesn't work – Rogerio Schmitt Commented Oct 19, 2019 at 19:14
• CSS: #spinner { display:none; } body.spin #spinner { display:block; } In onclick event: $('body').addClass('spin'); When done: $('body').removeClass('spin'); Don't use .html() to hide/recreate element, it is stress to the DOM and can introduce ugly side effects. So better do it with CSS classes, it is easier and less stressful. – Codebeat Commented Oct 20, 2019 at 19:18
• Also, check your html is valid and complete with html validator. – Codebeat Commented Oct 20, 2019 at 19:24

6 Answers 6

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.

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>

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'

$("#spin_ID").attr('hidden', true);// Hide

$("#spin_ID").attr('hidden', false);// Show

This works for me Bootstrap 5.2.3

HTML

<style>
    #spinner { display:none; } 
    body.spin #spinner { display:block; }
</style>
<div class="d-flex justify-content-center">
    <div class="spinner-border" role="status" id="spinner">
    </div>
</div>

JAVASCRIPT

$('body').addClass('spin');
do_something ();
$('body').removeClass('spin');

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>