javascript - Progress bar render on form submit | Complete on data response

Question

I am installing a search bar, and I want it to appear when the form is submitted, and complete/dissapear when the response is returned. Any idea on how to do so? I am working with the bootstrap progress bar

<div class="progress" style="height: 5px;">
    <div class="progress-bar" style="color:#EB7051;" style="background-color: #ffffff" role="progressbar" style="width: 25%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

I know this is HTML, but would I have to do anything with my fetch or POST request? That relevant code is below:

let progress = 0;
        const maxTime = 5000; // 5 seconds
        let interval = null;


    // onclick or the event that start the call
    interval = setInterval(() => {
    progress = progress >= 100 ? 100 : progress + 1
    document.getElementById('myprogress').style.width = `${progress}%`
    
    // end interval and wait at 100%
    if(progress == 100) clearInterval(interval);
        }, maxTime/100)
    document.getElementById('loadingcontainer').style.display = "none"


        function searchIt() {

            let form = document.querySelector('form')
            console.log(form)

            form.addEventListener('submit', async(e) => {
                e.preventDefault()
                let urlIN = form.url.value
                let url = encodeURIComponent(urlIN)
                console.log(url)
                try {
                    const data = await fetch('/', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            url: url
                        })


                    }).then(res => {
                        document.open()
                        res.text().then(function(text) {
                            document.write(text)
                            // Hide the progressbar, stop the timer and reset progress
                        clearInterval(interval);
                        progress = 0;
                        document.getElementById('myprogress').style.width = "0%"
                        document.getElementById('loadingcontainer').style.display = "";
                  
                        });

                    })


                } catch (err) {
                    console.error(err)
                }

            })

            

        }

Progress-bar:

    .progress-bar {
            background-color: rgb(255, 255, 255);
            color: rgb(197, 90, 28);
            -webkit-box-shadow: none;
            box-shadow: none;
        }

    </style>




<div id="loadingcontainer">
<div class="progress" style="height: 5px;">
    <div id="myprogress" class="progress-bar" style="color:#EB7051;" style="background-color: #ffffff" role="progressbar" style="width: 25%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

question from:https://stackoverflow.com/questions/65877889/progress-bar-render-on-form-submit-complete-on-data-response

Answer 1

I'd recommend using a spinner instead of a loading bar unless if you're downloading something that takes more than say 5 seconds to download. The reason is that getting hooking the progress bar up to the downloaded chunks won't be worth the effort.

The steps are:

1. Just before as you send out the request (maybe before or asynchronously after) you display the spinner/progressbar.
2. Then as your download completes, you'll remove the spinner/progressbar

// --- Set somewhere else but within scope
const url = "some url";
let progress = 0;
const maxTime = 5000; // 5 seconds
let interval = null;

// onclick or the event that start the call
interval = setInterval(() => {
    progress = progress >= 100 ? 100 : progress + 1
    document.getElementById('myprogress').style.width = `${progress}%`
    
    // end interval and wait at 100%
    if(progress == 100) clearInterval(interval);
}, maxTime/100)
document.getElementById('loadingcontainer').style.display = "none"

const data = fetch('/', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        url: url
    })
 }).then(res => {
    document.open()
    res.text().then(function(text) {
        document.write("done")
        // Hide the progressbar, stop the timer and reset progress
        clearInterval(interval);
        progress = 0;
        document.getElementById('myprogress').style.width = "0%"
        document.getElementById('loadingcontainer').style.display = "";
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>


<div id="loadingcontainer" >
  <div class="progress">
     <div id="myprogress" class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"> 
 </div>
</div>
</div>