react-progress-indicator-component v1.0.0

React Reading Progress Bar

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

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

npm install react-reading-progress-bar
# or
yarn add react-reading-progress-bar

Usage

import { ReadingProgressBar } from 'react-reading-progress-bar'

// 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

Examples

Custom Gradient

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

Bottom Positioned

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

No Effects

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

Integration with Navbar

// 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:

.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