jquery $(somthing).html() no se ejecuta al principio .__.

[Kase]

necesito que esta linea se ejecute al principio

$('#procesando').html('<div class="progress progress-striped active"><div class="bar" style="width:100%;">Procesando</div></div>');

para que se vea una animacion de procesando... y que al final se ejecute esta otra linea

$('#procesando').html('');

pero parece que mi codigo ejecuta todo a la par... y yo necesito que ejecute primero la animacion de inicio, procese  el ajax (es mucho y puede tardar minutos) y que luego finalize la animacion

Código (javascript) [Seleccionar] Expandir

   $('#Fsend').click(function(){
        $('#procesando').html('<div class="progress progress-striped active"><div class="bar" style="width:100%;">Procesando</div></div>');
        data = new FormData();
        data.append('message',$('#message').val())
        data.append('access_token',$('#access_token').val())
        data.append('source', $('#source')[0].files[0]);
        $('.grupo').each(function(){
            var grupo = $(this);
            if (this.checked) {
                var url = '{{url}}'
                $.ajax({
                async: false,
                data: data,
                url: url,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function(json){
                    $(grupo).parent().parent().find('.process-ok').html(<img src="'checked-clip-art.jpg" style="heigth:20px;widht:20px;">')
                    }
                });         
            }
            });
        $('#procesando').html('');
    });