javascript - Show a "bouncing dot loading gif" over button when clicked -

i'm trying load "bouncing dot - loading gif" on number of button while script running.

my problem:

• the entire button gets replaced image. want replace text?! please help. thanks.

code example: http://jsfiddle.net/v1pezwuh/1/

javascript

$(function() {  $(".vote").click(function()  {  var id = $(this).attr("id"); var name = $(this).attr("name"); var datastring = 'id='+ id ; var parent = $(this);   if(name=='up') {  $(this).fadein(200).html('<img src="http://i.imgur.com/uosbux1.gif" align="absmiddle">'); $.ajax({    type: "post",    url: "up_vote.php",    data: datastring,    cache: false,     success: function(html)    {    parent.html(html);    }  });   } else if(name=='down') {  $(this).fadein(200).html('<img src="http://i.imgur.com/uosbux1.gif" align="absmiddle">'); $.ajax({    type: "post",    url: "down_vote.php",    data: datastring,    cache: false,     success: function(html)    {        parent.html(html);         }          });     }   return false;         });     }); 

css

body { background: black; }  .button-vote-up {     display: inline-block;     background: #23d76f;     color: #fff;     text-decoration: none;     font-weight: 300;     font-color: white;     padding: 5%;     width: 100px;     outline: 0;     border-radius:10%;     box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(192,255,216,0.5), inset 0px 0px 0px 2px rgba(82,227,99,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);     background-image: -moz-linear-gradient(top, #23d76f, #019c0f);     background-image: -webkit-linear-gradient(top, #23d76f, #019c0f);     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#23d76f), to(#019c0f));     background-image: -ms-linear-gradient(top, #23d76f, #019c0f);     background-image: -o-linear-gradient(top, #23d76f, #019c0f);     background-image: linear-gradient(top, #23d76f, #019c0f);     text-shadow: -1px -1px 1px rgba(0,0,0,0.5); }  .button-vote-up:hover {     background: #2bfb83;     box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(192,255,216,0.5), inset 0px 0px 0px 2px rgba(82,227,99,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);     background-image: -moz-linear-gradient(top, #2bfb83, #0cad32);     background-image: -webkit-linear-gradient(top, #2bfb83, #0cad32);     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2bfb83), to(#0cad32));     background-image: -ms-linear-gradient(top, #2bfb83, #0cad32);     background-image: -o-linear-gradient(top, #2bfb83, #0cad32);     background-image: linear-gradient(top, #2bfb83, #0cad32); }  .button-vote-up:active {     background: #019c0f;     box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(192,255,216,0.5), inset 0px 0px 0px 2px rgba(82,227,99,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);     background-image: -moz-linear-gradient(top, #019c0f, #23d76f);     background-image: -webkit-linear-gradient(top, #019c0f, #23d76f);     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#019c0f), to(#23d76f));     background-image: -ms-linear-gradient(top, #019c0f, #23d76f);     background-image: -o-linear-gradient(top, #019c0f, #23d76f);     background-image: linear-gradient(top, #019c0f, #23d76f); } 

html

<div class='up'> <a href='' class='vote' id='2' name='up'>     <div class="button-vote-up">       <div class="numvotes">27</div>       <div class="voteupdown">up</div>     </div> </a> 

replace

$(this).fadein(200).html('<img src="http://i.imgur.com/uosbux1.gif" align="absmiddle">'); 

with

$(this).children().first().fadein(200).html('<img src="http://i.imgur.com/uosbux1.gif" align="absmiddle">'); 

jsfiddle

to make bit shorter, can use .eq(0) instead of .first().