react-progressbar-on-scroll

Progress bar on scroll React component

live example on codesandbox

Installation

npm install react-progressbar-on-scroll
# or
yarn add react-progressbar-on-scroll

Usage

import React from 'react'
import ProgressBar from 'react-progressbar-on-scroll'

const App = () => (
  <div className="app">
    <ProgressBar />
    <div>Your content...</div>
  </div>
)

export default App

Available props

key	type	default	description
color	string	#1ce	color of progress bar
height	number	4	height of progress bar in px
direction	right-left	right	towards where the progress bar fills
position	top-bottom	top	position of progress bar in window
gradient	boolean	false	activate gradient on progress bar
gradientColor	string	yellow	Second color of progress bar

Example

<ProgressBar
  color="#fff"
  height={10}
  direction="left"
  position="bottom"
  gradient={true}
  gradientColor="#eee"
/>

Licence

MIT