Breaking News: Grepper is joining You.com. Read the official announcement!

Javascript/CSS Progress Bar for Excel Rows

Avril Henry answered on September 19, 2023 Popularity 1/10 Helpfulness 1/10

answer Javascript/CSS Progress Bar for Excel Rows

Javascript/CSS Progress Bar for Excel Rows

Comment

// javascript
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);
    
    // add validation here for row
    
  }, 10 * i);
}


// CSS
<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>

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: excel javascript progress-bar rows

Link to this answer
Share Copy Link

Contributed on Sep 19 2023

Avril Henry

0 Answers Avg Quality 2/10

Javascript/CSS Progress Bar for Excel Rows

Contents

More Related Answers

Javascript/CSS Progress Bar for Excel Rows

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.