I am working on developing a progress bar using vue js and bootstrap for my desktop application. Within the template, I have the code that will generate the necessary markup:
<div class="container-fluid p-0 vh-100" v-if="isLoading">
<div class="row m-0">
<div class="col-4 mx-auto">
<div class="progress rounded-0" role="progressbar">
<div class="progress-bar text-uppercase" id="progressBar" style="width: 0%;"></div>
</div>
</div>
</div>
</div>
In a specific method, I have the following code, in which I need to incorporate some logic to load data and update a Supabase database. My goal is to hide the progress bar once all the data has been loaded:
updateDatabase() {
const preloader = document.getElementById('progressBar')
setTimeout( () => {
preloader.style.width = '15%'
preloader.style.width = '30%'
preloader.style.width = '45%'
preloader.style.width = '60%'
preloader.style.width = '75%'
preloader.style.width = '90%'
preloader.style.width = '100%'
}, 1500)
//other db logics
}
Additionally, I have a data property called isLoading that is initially set to true when the progress bar and database loading/update process are ongoing. However, I noticed that the progress bar disappears immediately, which was not the intended behavior. How can I properly implement a timeout function to gradually adjust the width percentage of the progress bar? Setting the isLoading variable at the end of the timeout causes it to be set to false immediately, resulting in the disappearance of the progress bar. Any guidance on this issue would be greatly appreciated. Thank you.