Skip to content
Progress bar whose value changes based on scrolling
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Progress bar Mar 26, 2020
src Progress bar Mar 26, 2020
.babelrc
.editorconfig init create-react-library@2.6.7 Mar 24, 2020
.eslintrc init create-react-library@2.6.7 Mar 24, 2020
.gitignore
.travis.yml init create-react-library@2.6.7 Mar 24, 2020
LICENSE
README.md
package-lock.json
package.json Progress bar Mar 26, 2020
rollup.config.js

README.md

scrolling-based-progressbar

React Progress bar whose value changes based on scrolling

NPM JavaScript Style Guide

Install

npm install scrolling-based-progressbar

Demo

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

Preview

Demo 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'

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

You can’t perform that action at this time.