react-progress-bar

TypeScriptJavaScriptCSS

README

React Reading Progress Bar

A customizable reading progress indicator for React applications that shows how far the user has scrolled down the page.

React Rollup TypeScript Jest

Features

  • Shows a horizontal progress bar that fills as the user scrolls down the page
  • Supports custom colors, gradients, and glow effects
  • Can be positioned at the top or bottom of the viewport
  • Appears/disappears based on scroll position
  • Fully customizable with various props
  • Lightweight with no dependencies

Installation

 
tsx
npm install react-progress-indicator-component
# or
yarn add  react-progress-indicator-component

Usage

 
tsx
import { ReadingProgressBar } from ' react-progress-indicator-component';

// Basic usage
function MyComponent() {
  return (
    <div>
      <ReadingProgressBar />
      {/* Your content */}
    </div>
  );
}

// Custom styling
function MyCustomComponent() {
  return (
    <div>
      <ReadingProgressBar
        color="#FF5500"
        height={5}
        useGradient={true}
        useGlow={true}
        position="top"
        zIndex={50}
      />
      {/* Your content */}
    </div>
  );
}

Props

PropTypeDefaultDescription
colorstring'#FFDD00'Base color for the progress bar
heightnumber3Height of the progress bar in pixels
classNamestring''Additional CSS classes
useGradientbooleantrueWhether to use a gradient effect
useGlowbooleantrueWhether to use a glow effect
gradientColorsstring[][color, '#FFA500', '#FF8C00']Custom gradient colors
glowIntensitynumber0.7Intensity of the glow effect (0-1)
showAfterScrollnumber100Minimum scroll position (in pixels) before showing the progress bar
position'top' | 'bottom''top'Position of the progress bar
zIndexnumber40Z-index of the progress bar
initiallyVisiblebooleanfalseWhether to show the progress bar initially
styleCSSProperties{}Custom styles to apply to the progress bar

Examples

Custom Gradient

 
tsx
<ReadingProgressBar
  useGradient={true}
  gradientColors={['#3498db', '#2ecc71', '#f1c40f']}
  height={4}
/>

Bottom Positioned

 
tsx
<ReadingProgressBar position="bottom" color="#9b59b6" height={3} />

No Effects

 
tsx
<ReadingProgressBar useGradient={false} useGlow={false} color="#e74c3c" />

Integration with Navbar

 
tsx
// Inside your Navbar component
{
  shouldShowProgressBar && (
    <ReadingProgressBar height={4} color="#FFDD00" style={{ top: '56px' }} />
  );
}

Customizing CSS

The component uses CSS variables that can be overridden in your global CSS:

 
tsx
.reading-progress {
  --progress-color: #ffdd00;
  --progress-gradient: linear-gradient(90deg, #ffdd00, #ffa500, #ff8c00);
  --progress-glow: 0 0 10px rgba(255, 221, 0, 0.7);
}

License

MIT