Remplacer une image par un compteur en guise de Loader!

Bonjour à tous,
voilà je voudrais remplacer une image (un loader) par un simple ( chrono) " pour faire original dans mon code.
mais je n'arrive pas!
NB: j'ai déjà le bout de code du chrono et de mon propre script (si ça peut renseigner)
merci d'avance

voici le mon script:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function displayRecords(numRecords, pageNum) {
                                $.ajax({
                                    type: "GET",
                                    url: "getrecords.php",
                                    data: "show=" + numRecords + "&pagenum=" + pageNum,
                                    cache: false,
                                    beforeSend: function() {
                                        $('.loader').html('<img src="loader.gif" alt="" width="24" height="24" style="padding-left: 400px; margin-top:10px;" >');
                                    },
 
                                    success: function(html) {
                                        $("#results").html(html);
                                        $('.loader').html('');
                                    }
                                });
                            }       
                            //au démarrage ou à l'actualisation du script on procède... 
                            $(document).ready(function() {
                                displayRecords(10, 1);
                            });

et voici mon chrono

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
$({countNum: $('#counter').text()}).animate({countNum: 1000}, {
  duration: 8000,
  easing:'linear',
  step: function() {
    $('#counter').text(Math.floor(this.countNum));
  },
  complete: function() {
    $('#counter').text(this.countNum);
    //alert('finished');
  }
});