Increase the time on the progress bar

I have a website that does subtitle translation but before translating the subtitle progress bar finishes loading and shows a download button so my visitors save the incomplete subtitle.

Is there any possibility for me to extend the time of the progres bar or after translation of subtitle that make a countdown for at least 5 seconds longer while the subtitle translation is completed?

This is the progress bar code :

<div id="select_lang">
<div class="wrapper"> Translating <span class="info"></span>...<div class="progress-bar" ease-in-out><span class="progress-bar-fill" style="width: 0%;"></span></div>

And this is the CSS.

.progress-bar {
    width: 100%;
    background-color: #e0e0e0;
    padding: 3px;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(47, 44, 56);

.progress-bar-fill {
    display: block;
    height: 22px;
    background-color: #ffffff;
    border-radius: 3px;
    transition: width 500ms ease-in-out;

also this script maybe can help more:

               ```<script type="text/javascript">
                function getFile() {
                    var filePath = document.getElementById("file").value;
                    var valu = document.getElementById("updateFile").value = filePath;
                    var valu  = valu.split(/(\\|\/)/g).pop();
                    var parts = valu.split(".");
                    document.getElementById("subtitle").value = parts[0];
                    var langPath = $(" option:selected").text();
                    document.getElementById("country").value = langPath;
                    //file upload
                    var file_data = $('#file').prop('files')[0];
                    var form_data = new FormData();
                    form_data.append('file', file_data);
                        url: 'upload_file.php', // point to server-side PHP script
                        dataType: 'text',  // what to expect back from the PHP script, if anything
                        cache: false,
                        contentType: false,
                        processData: false,
                        data: form_data,
                        type: 'post',
                        success: function(data){
                            console.log(data); // display response from the PHP script, if any

or this one:

<script type="text/javascript">
            /*function stoppedTyping(){
                if($('#subtitle').val().length > 1 && $('#country').val().length >0 ) {
                    document.getElementById('submit_button').disabled = false;
                } else {
                    document.getElementById('submit_button').disabled = true;

            function savedb() {

                var php_var = document.getElementById("subtitle").value+".srt";
                var srt = document.getElementById('srt_text').innerHTML;
                var subtitle = document.getElementById("file").value.replace(/^.*[\\\/]/, '');
                subtitle = encodeURIComponent(subtitle); 
                var language = document.getElementById('country').value;
                var author = document.getElementById('author').value;
                    type: "POST",
                    url: "save_database.php",
                    data: {
                        file: php_var,
                        srt: srt,
                        subtitle: subtitle,
                        language: language,
                    cache: false,

                    success: function (data) {

                            window.location = '';
                        }, 10);

1 answer