top of page

Just Jolly Functions

Functions: Adding a Progress Bar with HTML, CSS, and JavaScript

A progress bar is a visual representation used to show the progress of an ongoing task, operation, or process. It indicates how much of the task has been completed and how much remains. This gives users a clear indication of the progress, helping them to understand how long they might need to wait.



Progress Bar Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Progress Bar</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f4f4f9;
      margin: 0;
    }

    .progress-container {
      width: 80%;
      max-width: 600px;
      background-color: #ddd;
      border-radius: 20px;
      overflow: hidden;
    }

    .progress-bar {
      height: 30px;
      width: 0;
      background-color: #4CAF50;
      text-align: center;
      line-height: 30px;
      color: white;
      border-radius: 20px;
      transition: width 0.2s ease-in-out;
    }

    #progress-text {
      position: absolute;
      font-size: 16px;
      color: #333;
    }
  </style>
</head>
<body>

  <div class="progress-container">
    <div id="progress-bar" class="progress-bar">
      <span id="progress-text">0%</span>
    </div>
  </div>

  <script>
    let progress = 0;
    const progressBar = document.getElementById('progress-bar');
    const progressText = document.getElementById('progress-text');

    // Simulate progress increment
    function updateProgress() {
      if (progress < 100) {
        progress++;
        progressBar.style.width = progress + '%';
        progressText.innerText = progress + '%';
      }
    }

    // Call updateProgress function every 100ms
    const interval = setInterval(updateProgress, 100);

    // Stop progress when it reaches 100%
    setTimeout(() => {
      clearInterval(interval);
    }, 10000);  // Stop after 10 seconds
  </script>

</body>
</html>

Explanation:

  1. HTML Structure:

    • The progress-container is a div that holds the background of the progress bar.

    • The progress-bar is the actual bar that will grow as the page progresses.

    • The progress-text is used to display the percentage on the progress bar.

  2. CSS Styling:

    • progress-container: The background of the progress bar. It has a width of 80% of the page, with a maximum of 600px.

    • progress-bar: The actual progress bar that will change width. It has a smooth transition effect for when it updates.

    • The text inside the progress bar is centered vertically using line-height and horizontally by absolute positioning.

  3. JavaScript Functionality:

    • A variable progress keeps track of the current progress (from 0 to 100).

    • updateProgress() function increments the progress value and updates the width of the progress-bar accordingly.

    • setInterval() is used to call the updateProgress() function every 100 milliseconds to simulate the progress.

    • The progress stops automatically after 10 seconds (setTimeout()).


Customizations:

  • Speed of Progress: You can change the interval time in setInterval(updateProgress, 100); to make the progress bar fill faster or slower.

  • Max Duration: Modify the setTimeout value to change when the progress bar stops.

  • Appearance: You can customize the color of the progress bar, text, and container by adjusting the background-color, color, and border-radius properties.


This is a simple, smooth progress bar that can be enhanced further with additional features like loading dynamic content or tracking a task's completion status.

bottom of page