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