JSFiddle - React, Tailwind, and code Playground

by Cam Gould

HTML

<label for="progress">Loading</label>
<progress id="progress" max="100" value="0">0%</progress>

JavaScript

function loadingProgress(progressElement) {
  if (!progressElement) return;

  let progress = 0; // Progress value
  let interval = 50; // Initial interval delay

  easeLoading = () => {
    progress ++; // Increment progress value
    interval = interval / 1.1; // Drecrease interval delay

    // Stop if 100% progress reached
    if (progress >= 100) return;

    // Update the progress input element
    progressElement.value = progress;
    progressElement.innerHTML = `${progress}%`;

    setTimeout(easeLoading, interval);
  };

  // Start loading progress
  easeLoading();
}

document.addEventListener('DOMContentLoaded', () => {
  const progressElement = document.getElementById('progress');
  loadingProgress(progressElement);
});