I am currently working on a data table containing a large amount of data (5000). To be able to load the data at a progressive pace, I added a progress bar that illustrates how much data has been loaded per time unit. But the code below no longer works.

let handleProgressBar = (id, value, total) => { let percent = Math.round((value / total) * 10000) / 100; $(id " > div").html(percent "%"); $(id " > div").css('width', percent "%"); } let table = $('#data').DataTable(); fetch('https://jsonplaceholder.typicode.com/photos') .then((res) => res.json()) .then((res) => { res.forEach(async(data, index)=>{ table.row.add([ data.id, data.albumId, data.title, data.url ]); handleProgressBar('#progress-bar', index 1, res.length); await new Promise(r => setTimeout(r, 1)); // sleep 1 ms }); table.draw(); });

.progress-bar-striped { overflow: hidden; height: 20px; margin-bottom: 20px; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .progress-bar-striped>div { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; float: left; width: 0%; height: 100%; font-size: 12px; line-height: 20px; color: #000000; font-weight: bold; text-align: center; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); /*-webkit-transition: width 3s ease; -moz-transition: width 3s ease; -o-transition: width 3s ease; transition: width 3s ease;*/ animation: progress-bar-stripes 2s linear infinite; background-color: #288ade; } .progress-bar-striped p { margin: 0; } @keyframes progress-bar-stripes { 0% { background-position: 40px 0; } 100% { background-position: 0 0; } }

   
 
 
0%
 
 
 
 
 
 
ID
 
Album ID
 
Title
 
URL Photo
 
 
 
 

The table loaded successfully, but the progress bar shows 100% instead of incrementing from 0% to 100%. I was wondering if it would work (but not perfectly) if I didn't use a datatable, as shown in the code below.

let handleProgressBar = (id, value, total) => { let percent = Math.round((value / total) * 10000) / 100; $(id " > div").html(percent "%"); $(id " > div").css('width', percent "%"); } (async() =>{ let n = 5000; handleProgressBar('#progress-bar', 0, n); for(let i = 1; i <= n; i ) { handleProgressBar('#progress-bar', i, n); await new Promise(r => setTimeout(r, 1)); // sleep 1 ms } })();

.progress-bar-striped { overflow: hidden; height: 20px; margin-bottom: 20px; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .progress-bar-striped>div { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; float: left; width: 0%; height: 100%; font-size: 12px; line-height: 20px; color: #000000; font-weight: bold; text-align: center; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); /*-webkit-transition: width 3s ease; -moz-transition: width 3s ease; -o-transition: width 3s ease; transition: width 3s ease;*/ animation: progress-bar-stripes 2s linear infinite; background-color: #288ade; } .progress-bar-striped p { margin: 0; } @keyframes progress-bar-stripes { 0% { background-position: 40px 0; } 100% { background-position: 0 0; } }

 
 
 
0%