show progress bar while uploading video using jquery plugin

Question

I am uploading a video in laravel. Video is being uploaded perfectly and for the validation, I am using jQuery Validate plugin.

I want to show progress bar, while uploading video. I have added a progress bar. But it does not work.

form is: Below is the form to select a video and show the progress bar.

<div class="row" style="margin-top: 10px;">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="video_price">Select Video<b class="red">*</b></label>
                                        <input id="vide_Upload" type="file" name="vide_Upload"
                                            style="opacity: 0; position: absolute; z-index: -1;" accept="video/*" />
                                        <label for="vide_Upload" id="file-drag">
                                            Select a file to upload (Max file size must be less than 100MB)
                                            <br />OR
                                            <br />Drag a file into this box

                                            <br /><br /><span id="vide_Upload-btn" class="button">Add a video</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-lg-6 video-details">
                                    <div class="form-group">
                                        <div class="custom-control">
                                            <div id="file-details"></div>
                                        </div>
                                        <div class="progress videoProgressBar">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

ajax is: Below is the submitHandler. Because I am using jquery validation.

 submitHandler: function(form) {
                    var formData = new FormData(form);

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $('#videoSubmit').html('Please Wait...Do not reload page or click on any button.');
                    $("#videoSubmit").attr("disabled", true);

                    $.ajax({
                        url: '{{ route('video.store') }}',
                        type: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        beforeSend: function () {
                            var percentage = '0';
                        },
                        uploadProgress: function (event, position, total, percentComplete) {
                           // $('.videoProgressBar').show();
                            var percentage = percentComplete;
                            $('.progress .progress-bar').css("width", percentage+'%', function() {
                            return $(this).attr("aria-valuenow", percentage) + "%";
                            })
                        },
                        success: function(response) {
                            //$('#videoSubmit').html('Submit Your Video');
                            //$("#videoSubmit"). attr("disabled", false);
                            if (response.success == 'error') {
                                $('#videoSubmit').html('Submit Your Video');
                                $("#videoSubmit").attr("disabled", false);
                                $('.errorDisplayDiv').html(response.message);
                                $('html, body').animate({
                                    scrollTop: 0
                                }, 0);
                                $('.successDiv').slideDown('slow', function() {
                                    /*setTimeout(function() {
                                    $('.successDiv').slideUp('slow');
                                    }, 5000);*/
                                });
                            } else {
                                window.location.href = response.redirect;
                            }
                        },
                        error: function(xhr, status, error) {
                            var errors = JSON.parse(xhr.responseText).errors;
                            $.each(errors, function(key, value) {
                                $("#" + key + "_videos-error").html(value[0]);
                            });
                            reloadCaptcha_video();
                            $('#videoSubmit').html('Submit Your Video');
                            $("#videoSubmit").attr("disabled", false);
                        }
                    });
                }