Progress Bar Navbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Progress Bar Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (Content Theme)
        ========================================
        */
        :root {
            --color-background: #ffffff;
            --color-text-primary: #2c3e50;
            --color-text-secondary: #7f8c8d;
            --color-primary: #3498db; /* Blue for the progress bar */
            --color-border: #ecf0f1;
            
            --progress-bar-height: 4px;
            --font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            --navbar-height: 70px;
            --container-width: 1140px;
            --transition-speed: 0.2s;
        }
        @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
        
        /*
        ========================================
        Base & Page Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-family-sans-serif); line-height: 1.7; background-color: var(--color-background); }
        .content {
            height: 300vh; /* Make the page very long to see the effect */
            max-width: 800px; margin: 0 auto;
            padding: calc(var(--navbar-height) + 3rem) 1.5rem;
        }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; color: var(--color-text-secondary); transition: color var(--transition-speed) ease; }
        a:hover, a:focus { color: var(--color-text-primary); }

/*
        ========================================
        Main Navbar Structure
        ========================================
        */
        .navbar {
            height: var(--navbar-height); display: flex; align-items: center;
            position: sticky; top: 0; z-index: 1000;
            background-color: var(--color-background);
            border-bottom: 1px solid var(--color-border);
        }
        .navbar__container { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 1.5rem; }
        .navbar__brand { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary); }

/* Mobile Menu */
        .navbar__toggle { display: block; border: none; background: transparent; cursor: pointer; }
        .navbar__menu { display: none; position: absolute; top: var(--navbar-height); left: 0; width: 100%; background-color: var(--color-background); border-top: 1px solid var(--color-border); }
        .navbar__menu.is-active { display: block; }
        .navbar__item:not(:last-child) { border-bottom: 1px solid var(--color-border); }
        .navbar__link { display: block; padding: 1.25rem 1.5rem; font-weight: 500; }

/*
        ========================================
        Progress Bar Styles
        ========================================
        */
        .progress-bar {
            position: absolute; bottom: -1px; /* Overlap the border slightly */
            left: 0;
            width: 100%; height: var(--progress-bar-height);
            background-color: transparent; /* The track is invisible by default */
        }

.progress-bar__indicator {
            height: 100%; width: 0; /* Starts at 0 width */
            background-color: var(--color-primary);
            transition: width 0.1s linear; /* Smooths out rapid updates slightly */
        }
        
        /*
        ========================================
        Desktop & Responsive Styles
        ========================================
        */
        @media (min-width: 768px) {
            .navbar__toggle { display: none; }
            .navbar__menu { display: flex; align-items: center; position: static; width: auto; background: none; border: none; }
            .navbar__list { display: flex; gap: 2rem; }
            .navbar__item:not(:last-child) { border-bottom: none; }
            .navbar__link { padding: 0.5rem; }
        }
    </style>
</head>
<body>
    <header class="navbar">
        <div class="navbar__container">
            <a href="#" class="navbar__brand">LongRead</a>
            
            <button class="navbar__toggle" id="navbarToggle" aria-label="Open menu">&#x2630;</button>
            
            <nav class="navbar__menu" id="navbarMenu">
                <ul class="navbar__list">
                    <li><a href="#" class="navbar__link">Section 1</a></li>
                    <li><a href="#" class="navbar__link">Section 2</a></li>
                    <li><a href="#" class="navbar__link">About</a></li>
                </ul>
            </nav>
        </div>
        
        
        <div class="progress-bar" aria-hidden="true">
            <div class="progress-bar__indicator" id="progressIndicator"></div>
        </div>
    </header>

<main class="content">
        <h1>The Progress Bar Navbar</h1>
        <p>As you scroll down this long page, the blue bar at the bottom of the navigation will fill up, indicating your reading progress.</p>
    </main>
    
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // --- Mobile Menu Toggle ---
        const navbarToggle = document.getElementById('navbarToggle');
        const navbarMenu = document.getElementById('navbarMenu');
        if (navbarToggle && navbarMenu) {
            navbarToggle.addEventListener('click', () => {
                navbarMenu.classList.toggle('is-active');
            });
        }

// --- Progress Bar Logic ---
        const progressIndicator = document.getElementById('progressIndicator');
        
        function updateProgressBar() {
            // Get the total scrollable height of the document
            const totalScrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            // Get the current scroll position
            const scrolled = window.scrollY;
            
            // Calculate the scroll percentage
            // Avoid division by zero if there's no scrollbar
            const scrollPercentage = totalScrollHeight > 0 ? (scrolled / totalScrollHeight) * 100 : 0;
            
            if (progressIndicator) {
                // Set the width of the indicator bar
                progressIndicator.style.width = scrollPercentage + '%';
            }
        }
        
        // Listen for scroll events on the window
        window.addEventListener('scroll', updateProgressBar);
        // Run once on load in case the page is already scrolled
        updateProgressBar();
    });
    </script>
</body>
</html>