CODEWITHSUNDEEP
javascriptjquerybootstrap-4
Rogerio Schmitt
Rogerio Schmitt

Reputation: 1275

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

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

Upvotes: 4

Views: 39687

Answers (6)

Alexandre Crivellaro
Alexandre Crivellaro

Reputation: 893

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');

Upvotes: 0

Dementr Andronov
Dementr Andronov

Reputation: 1

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

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

Upvotes: 0

Misrraim
Misrraim

Reputation: 51

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'

Upvotes: 3

Codebeat
Codebeat

Reputation: 6610

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.

Upvotes: 8

ZorgoZ
ZorgoZ

Reputation: 3569

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>

Upvotes: 5

chandra prakash kabra
chandra prakash kabra

Reputation: 341

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>

Upvotes: -1

Related Questions