Animated progressbar in Javascript

This is a simple code example of creating an animated progress bar element if you need one urgently.

This example will load the progress to 100% in the specified time and allow you to do specific things after it reaches that. The progress is paused when the cursor is over the container or the pause key is pressed and will continue when resumed.

Demo and full javascript code example below.

File: progress-bar.js


document.addEventListener('DOMContentLoaded', () => {
  // Find all containers that contain progress bar element.
  document.querySelectorAll('.container').forEach(container => {
    // Progress bar duration in milliseconds.
    const duration = 5000;
    // The progress bar value element.
    // At the moment is is referring to bootstrap progress bar component.
    const progressElements = document.querySelectorAll('.progress-bar');
    // Track pause time.
    let isPaused = false;
    // Current width.
    let width = 0;
    // The time the progress is paused.
    let pauseTime = 0;
    // Start time of the animation.
    let start;

    /**
     * Animate progress bar.
     *
     * @param timestamp
     */
    function animateProgressBar(timestamp) {
      // If start is not defined, set it to the current timestamp.
      if (start === undefined) {
        start = timestamp;
      }

      // Get how many milliseconds has passed since the start.
      const elapsed = timestamp - start;
      // Get percentage of time elapsed from the duration.
      const relativeProgress = elapsed / duration;

      if (!isPaused && width <= 100) {
        // Keep width at maximum 100%.
        width = Math.min(relativeProgress * 100, 100);

        progressElements.forEach(progressElement => {
          progressElement.style.width = `${width}%`;
        });
      }

      // Handle progress 100%.
      if (width >= 100) {
        width = 0;
        start = timestamp;
        // Reset progress bar.
        progressElements.forEach(progressElement => {
          progressElement.style.width = `${width}%`;
        });

        // Do something when progress is at 100%.
        // Go to next slide, tab etc.
      }

      // Continue animating progress bar.
      window.requestAnimationFrame(animateProgressBar);
    }

    // Initialize progress bar animation.
    window.requestAnimationFrame(animateProgressBar);

    /**
     * Toggle pause state of the animation.
     */
    function togglePause() {
      if (isPaused) {
        resumeAnimation();
      }
      else {
        pauseAnimation();
      }
    }

    /**
     * Pause animation.
     */
    function pauseAnimation() {
      isPaused = true;
      // Get pause time.
      pauseTime = performance.now();
    }

    /**
     * Resume animation.
     */
    function resumeAnimation() {
      isPaused = false;
      // Calculate new start time so that
      // the animation continues from the same point.
      start += performance.now() - pauseTime;
    }

    // Toggle animation when user hovers over the container.
    container.addEventListener('mouseenter', pauseAnimation);
    container.addEventListener('mouseleave', resumeAnimation);
    
    // Stop animation when user presses space key.
    // Mostly for keyboard navigation, it needs some focusable element inside on container.
    window.addEventListener('keydown', function(event) {
      if (container.contains(event.target) && event.code === 'Space') {
        event.preventDefault();
        event.stopPropagation();
        togglePause();
      }
    });
  });
});