scrolling-based-progressbar

scrolling-based-progressbar

React Progress bar whose value changes based on scrolling

Install

npm install scrolling-based-progressbar

Demo

https://progressbar-demo.netlify.com/

Preview

Usage

import React, { Component } from 'react'

import { ProgressBar } from 'scrolling-based-progressbar';

class Example extends Component {
  render () {
    return (
      <ProgressBar /> 
      or
      <ProgressBar height="4px" color="#1976d2" bgColor="#a7caed" />
    )
  }
}

Default values

color="red"

bgColor="transparent"

height="5px"

borderRadius = '0'

zIndex = '100000000'

top = '0'

left = '0'

position = 'fixed'

ContainerStyle & ProgressBarStyle

Using ContainerStyle & ProgressBarStyle you can define in-line style for ProgressBar

Here Is How

<ProgressBar height="3px"
  ContainerStyle={{backgroundColor:'#a7caed',bottom:'0',top:'none'}} 
  ProgressBarStyle={{backgroundColor:'#1976d2'}} />

Note

Use in each separate component where you want progress bar

Wrong

function App() {
  return (
    <BrowserRouter>
      <ModelManager/>
      <ProgressBar />
      <ScrollToTop>
        <Contactbar />
        <Usermenu />
        <Navbar />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/auth" component={Auth} />
          <Route path="/cart" component={Order} />
          <Route path="/contact" component={Contact} />
          <Route path="/details/:id" component={DetialsProduct} />
        </Switch>
      </ScrollToTop>
    </BrowserRouter>
  );
}

Right

Use in each component( Home , Auth , Order , Contact , DetialsProduct ) separately

License

MIT © ValeedAnjum