react-progressbar-on-scroll

Progress bar on scroll, React component

Usage no npm install needed!

<script type="module">
  import reactProgressbarOnScroll from 'https://cdn.skypack.dev/react-progressbar-on-scroll';
</script>

README

react-progressbar-on-scroll

npm bundle size npm peer dependency version Snyk Vulnerabilities for GitHub Repo Licence

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