Scroll Progress Indicator Generator

<!-- Scroll Progress Indicator -->
<div class="scroll-progress-container">
  <div class="scroll-progress-bar"></div>
</div>

.scroll-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  z-index: 9999;
}

.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: #6366f1;
  transition: width 0.1s ease-out;
}

// Scroll Progress Indicator JavaScript
const progressBar = document.querySelector('.scroll-progress-bar');

function updateProgress() {
  const scrollTop = window.scrollY;
  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
  const progress = (scrollTop / docHeight) * 100;
  progressBar.style.width = progress + '%';
}

// Update on scroll
window.addEventListener('scroll', updateProgress);

// Initial call
updateProgress();

import { useState, useEffect } from 'react';

const ScrollProgress = () => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const updateProgress = () => {
      const scrollTop = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const newProgress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
      setProgress(newProgress);
    };

    window.addEventListener('scroll', updateProgress);
    updateProgress();

    return () => window.removeEventListener('scroll', updateProgress);
  }, []);

  const containerStyle = {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    width: '100%',
    height: 4,
    background: 'transparent',
    zIndex: 9999,
  };

  const barStyle = {
    height: '100%',
    width: `${progress}%`,
    background: '#6366f1',
    transition: 'width 0.1s ease-out',
  };

  return (
    <div style={containerStyle}>
      <div style={barStyle} />
    </div>
  );
};

export default ScrollProgress;

// Usage: Add to your App component
// <ScrollProgress />