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