Spinner in Button - PullRequest
Новая
       1

Spinner in Button

1 голос
/ 16 января 2020

У меня есть кнопка, как показано ниже. 

<button type="button" id="#clock_in" class="btn btn-danger btn-lg">Clock-In</button>

Как я могу прикрепить Spinner после нажатия на нее и удалить после события, используя jQuery?

Я пробовал как ниже 

$('#clock_in').click(function(e){ 
   $('.btn').html('<i class="fa fa-spinner fa-spin"></i>Clock-In');
});

Ответы [ 2 ]

1 голос
/ 16 января 2020

По вашему вопросу, я предполагаю, что вы собираетесь использовать это с вызовом Ajax.

Для Spinner, здесь я использую библиотеку Fontawesome . 

$(document).ready(function() { 
  $("#clock_in").click(function() { 
  // Prevent from re-submit request by disabled button 
  $('#clock_in').attr("disabled", true);
  $("#clock_in").html('Clock-In <i class="fa fa-refresh fa-spin" id="spinner"></i>');
  	$.ajax({
      url: url,
      success: function(data){
        //The Ajax request was a success.
        //Do something in here.
      },
      complete: function(){
        //Ajax request is finished, so we can enable
        //the button again.
        $('#clock_in').attr("disabled", false);
        $("#spinner").remove();
      }
    });
  }); 
}); 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Spinner Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-sm-6 m-auto p-5">
      <button type="button" id="clock_in" class="btn btn-danger btn-lg">Clock-In</button>
    </div>
  </div>
  </div>
</div>
</body>
</html>
1 голос
/ 16 января 2020

только из вашего описания будет 

$('#clock_in').click(function(e){ 

    $('.btn').html('<i class="fa fa-spinner fa-spin"></i>Clock-In');



});
$(document).on(YOUR_EVENT_HERE, function(){
    $('.btn .fa-spinner').remove()
})

также, если вы хотите удалить его после некоторой анимации, вы можете попробовать 

$('#clock_in').click(function(e){ 
  var animationDuration = 2000;

    $('.btn').html('<i class="fa fa-spinner fa-spin"></i>Clock-In');


   setTimeout(function(){
       $('.btn .fa-spinner').remove()
   }, animationDuration)
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...