Question

I would like to add a progress animation to a function so that it displays at the begining of the function and then disappears at the end of it.

Something like:

<script type="text/javascript">
function myfunction() {
   //Display progress animation here
   $('input[type=submit]#submit').click();
   etc...
   //Hide the progress animation here
}
?>

UPDATE:

Here is my current Ajax code:

<script type="text/javascript">
function myfunction() {
    $("#ajax-form").submit(function(){
        $.post("submit.php",
        $("#ajax-form").serialize(),
            function(data){
          mysubmitForm();

            }

        );
        return false;

    });
}
</script>

Answer 1

What anix said:

<div class="loader">Loading...</div>

<script type="text/javascript">

$(function(){

    $.ajax({
        url: 'the url',
        data: {},
        success: function() {
            $('.loader').fadeOut();
        }
    });
});

</script>

---

Update:

<script type="text/javascript">

function myfunction() {

$("#ajax-form").submit(function(){
    //show loader here
    $.post("submit.php", $("#ajax-form").serialize(),
        function(data){
             mysubmitForm();
             //and hide it here
        }

    );
    return false;

});

}