javascript - Ajax/進行状況バーが機能しない

Question

ajaxリクエストが終了するまで進行状況バーを表示しようとしています(これはテキストフィールド+ラップトップWebカメラからキャプチャされたキャンバス画像です)。しかし、私のバーには進行状況がありません...表示され、終了すると消えますが、視覚的な進行はありません...

 $("#FormSubmitPhotoCapture").click(function (e) {

        e.preventDefault();

        if($("#form_titre_photo_capture").val()==="")
        {
            alert("Veuillez saisir un titre");
            return false;
        }
        var canvas = document.getElementById('canvascapt');
        var context = canvas.getContext('2d');
                var dataURL = canvas.toDataURL();
                document.getElementById('imagecaptimg').src = dataURL;
        var myData = {titre : $("#form_titre_photo_capture").val(), image_capture : "" + dataURL + ""}
        jQuery.ajax({
                beforeSend:function(x){
                    $('#progression').html("<progress id='bar' value='0' max='100'></progress>").show();
                        },
            type: "POST",
            url: "captureimg",
            dataType:"text",
            data:myData,
            success:function(response){
            $('#bar').val(100);
            $("#responds").before(response);
            $("#form_titre_photo_capture").val('');
                        $("#webcam_photo_capture").empty();
                        $('#FormSubmitPhotoCapture').hide();
            },
            complete: function() {
                        $('#bar').hide();
                    }
        });
    });

何かアイデアはありますか？