Как я могу показать / скрыть загрузчик с помощью jQuery?

Question

Я пытаюсь показать загрузчик при нажатии на кнопку, а затем скрыть его после получения ответа от API (в основном состояние загрузки).

Моя кнопка выглядит следующим образом:

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

До сих пор я безуспешно пытался комментировать / раскомментировать мой тег span, и был бы более простой способ запустить / остановить мой счетчик?

Мои функции комментирования / раскомментирования, которые явзял с здесь и не работает (как и просил):

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

function uncomment(element) {
    element.html(element.html().substring(4, element.html().length - 3))
}

Answer 1

Я не получил ваш код точно, но выкладываю свою идею, вы можете попробовать, если это возможно.

$(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>

Answer 2

HTML (с добавленным классом .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>

Добавить CSS в CSS-файл:

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

Или использовать видимость:

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

JQuery:

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

Когда закончите, сделайте:

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

Добавив класс типа «занят» в тело html-страницы, вы также можете делать очень полезные вещи, такие как блокировкаэлементы ввода и тому подобное без дополнительного кода JS. Пусть CSS сделает всю работу за вас вместо js. Вам нужно только добавить некоторые дополнительные правила CSS.

PS: проверьте ваш html на наличие ошибок с помощью html validator. Если в разметке есть ошибки, могут произойти странные вещи или они не сработают.

Получайте удовольствие.

Answer 3

В элементе есть атрибуты animation и -webkit-animation css.

Используйте такой класс

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

С помощью JQuery вы можете переключать этот класс на элементе. Если он будет добавлен, анимация остановится.

Обновление Это покажет, а затем скрутит счетчик.

$(() => {
  $('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>