The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a reading progress widget

Written by

Bernardo Palos

in

Here’s a reading progress widget written in JavaScript, HTML, and CSS. It shows a progress bar at the top of the page that fills up as the user scrolls down.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Reading Progress Widget</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    /* Progress bar container */
    #progress-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: #f0f0f0;
      z-index: 9999;
    }

    /* Actual progress bar */
    #progress-bar {
      height: 100%;
      width: 0%;
      background: #4caf50;
      transition: width 0.2s ease-out;
    }

    .content {
      padding: 20px;
      max-width: 800px;
      margin: 60px auto;
    }
  </style>
</head>
<body>

  <!-- Progress Bar -->
  <div id="progress-container">
    <div id="progress-bar"></div>
  </div>

  <!-- Content -->
  <div class="content">
    <h1>Sample Article</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <!-- Repeat or load long content for testing -->
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <!-- Add enough paragraphs to create scrollable content -->
  </div>

  <script>
    window.addEventListener('scroll', () => {
      const scrollTop = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const scrollPercent = (scrollTop / docHeight) * 100;
      document.getElementById('progress-bar').style.width = scrollPercent + '%';
    });
  </script>

</body>
</html>

How It Works:

  • The progress bar (#progress-bar) expands horizontally as the user scrolls.

  • The script calculates the scroll percentage based on the total height of the document and updates the width of the progress bar accordingly.

You can customize the color, height, and animation speed to match your website’s design.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About