JSFiddle - React, Tailwind, and code Playground

by Shin Okada

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="progress">
    <div class="progress-bar progress-bar-striped" style="min-width: 20px;">
    </div>
</div>

CSS

.progress{
  margin: 20px;        
}

JavaScript

let i = 0;
let filesize = 4200000; // change this
let divider = 50000 ; // change this
let timeout = filesize / divider;

const timer = ms => new Promise(res => setTimeout(res, ms))

async function progressBar(timeout){
    for (var i=1; i<=100; i++){
        $(".progress-bar").css("width", i + "%").text(i + " %");
        await timer(timeout);
    }
}

progressBar(timeout);