Как показать анимированный gif с помощью кнопки Bootstrap при нажатии

Question

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

http://jsfiddle.net/YCst4/1/

add two dependency files 
1) bootstrap.min.css 
2) bootstrap.min.js 

<button class="btn" id="button" data-text-loading="Loading...">Press Me</button> 
$('#button').button(); 

$('#button').click(function() { 
    $(this).button('loading'); 
}); 

теперь, как я мог показать это анимированный GIF http://www.bba-reman.com/images/fbloader.gif на месте кнопки, когда пользователь нажмет на кнопку.

, пожалуйста, посоветуйте мне, как это сделать с примером кода, если это возможно. спасибо

Answer 1

Что об этом:

$('#button').button(); 

$('#button').click(function() { 
    $(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />'); 
}); 

Жизнь демо: http://jsfiddle.net/YCst4/857/

Answer 2

Если я вас правильно понял, посмотрите на это Fiddle.

Я использовал атрибут CSS background и jQuery .show() и. hide() методы:

$('#button').click(function() { 
    $(this).hide(); 
    $(".loader").show(); 
}); 

Answer 3

$('#button').click(function() { 
    $(this).replaceWith('<img src="[loader-url]" />'); 
});