Datatables fnFilter Delay loader/indicator

Question

I am using datatables with a custom plugin I got from here fnSetFilteringDelay but wanted to add an indicator or loader of some sort to tell the user when the search will happen on the typed text in the filter textbox. I have done this but it is a bit buggy, maybe someone can help me to get this fluent and beautiful.

But if you type more and more, the indicator bar starts to look like it is shattering.

I would like to get rid of the shattering part if possible.

Here is my code after initialising the datatables to variable oTable

oTable.fnSetFilteringDelay(550); //After the last character is entered, will take 550 milliseconds to search
$('#gvProjectList_filter input').parent().append($("<div id='lder' style='width: 0px; height: 30px; background-color: #999; float:right;'></div>"));
$('#gvProjectList_filter input').on('keyup', function (a) {
    document.getElementById("lder").style.width = "50px"; //Start the indicator at 50px and end at 0px
    var count = 550; //Same as the filtering delay set above

    var counter = setInterval(timer, 25); //will run it every 25 millisecond
    function timer() {
        count -= 25; //Minus 25 milliseconds
        if (count <= 0) {
            clearInterval(counter);
            document.getElementById("lder").style.width = "0px";
            return;
        }
        var neww = parseInt((count / 550) * 50); //calculate the new width vs. time left of 550ms
        document.getElementById("lder").style.width = neww + "px";
    }
});

Basically it must start at 50px width, and go down, when the user types another character, the bar must start at 50px again.

---

Here is my jsFiddle demo, just type something to search, first one letter and then a whole name, you will see what I mean.

---

Answer 1

I have found my own solution. I have made use of the jquery animate function

oTable.fnSetFilteringDelay(550);
$('#mytable_filter input').parent().append($("<div id='lder' style='width: 0px; height: 20px; background-color: #999; float:right;'></div>"));
$('#mytable_filter input').on('keyup', function (a) {
    $("#lder").width('50px');
    $("#lder").stop().animate({width:'0px'},550);
});

works like a charm!

---

Here is the final Fiddle, check it out!

---