const totalRows = rows.length;
const progressBarsContainer = document.getElementById('progress-container');
const progressBar = document.createElement('progress');
progressBar.classList.add('progress-bar');
progressBar.setAttribute('value', '0');
progressBar.setAttribute('max', '100');
progressBarsContainer.appendChild(progressBar);
const progressMessage = document.createElement('p');
progressMessage.classList.add('progress-message');
progressMessage.innerHTML = `Checking row <span id="progress-row">0</span> of <span id="progress-total">${totalRows}</span>...`;
progressBarsContainer.appendChild(progressMessage);
for (let i = 0; i < totalRows; i++) {
setTimeout(() => {
const currentProgress = ((i + 1) / totalRows) * 100;
progressBar.setAttribute('value', currentProgress.toFixed());
$('#annotation-importer-progress-row').text(i + 1);
}, 10 * i);
}
<style>
.annotation-importer-progress-bar {
height: 13px;
border-radius: 5px;
width: 100%;
}
.annotation-importer-progress-bar::-webkit-progress-bar {
background-color: #ededed;
border-radius: 5px;
}
.annotation-importer-progress-bar::-moz-progress-bar {
background-color: #ededed;
border-radius: 5px;
}
.annotation-importer-progress-bar::-webkit-progress-value {
height: 13px;
border-radius: 5px;
background-color: #FFC72C;
}
</style>