react-top-loading-bar

react-top-loading-bar

Install

• using npm

npm install --save react-top-loading-bar

• using yarn

yarn add react-top-loading-bar

• CDN

https://unpkg.com/react-top-loading-bar

Usage

With ref

import React, { Component } from 'react'

import LoadingBar from 'react-top-loading-bar'

export default class ExampleWithRefs extends Component {
  render() {
    return (
      <div>
        <LoadingBar
          height={3}
          color='#f11946'
          onRef={ref => (this.LoadingBar = ref)}
        />
        <button onClick={() => this.LoadingBar.continousStart()}>
          Start Continous Bar Loading
        </button>
        <button onClick={() => this.LoadingBar.staticStart()}>
          Start Static Bar Loading
        </button>
        <button onClick={() => this.LoadingBar.complete()}>Complete</button>
        <br />
        <button onClick={() => this.LoadingBar.add(10)}>Add 10</button>
        <button onClick={() => this.LoadingBar.add(10)}>Add 30</button>
      </div>
    )
  }
}

With state

import React, { Component } from 'react'

import LoadingBar from 'react-top-loading-bar'

export default class App extends Component {
  state = {
    loadingBarProgress: 0
  }

  add = value => {
    this.setState({
      loadingBarProgress: this.state.loadingBarProgress + value
    })
  }

  complete = () => {
    this.setState({ loadingBarProgress: 100 })
  }

  onLoaderFinished = () => {
    this.setState({ loadingBarProgress: 0 })
  }

  render() {
    return (
      <div>
        <LoadingBar
          progress={this.state.loadingBarProgress}
          height={3}
          color='red'
          onLoaderFinished={() => this.onLoaderFinished()}
        />
        <button onClick={() => this.add(10)}>Add 10</button>
        <button onClick={() => this.add(30)}>Add 30</button>
        <button onClick={() => this.complete()}>Complete</button>
      </div>
    )
  }
}

Demo

Click here for demo

Built-in Methods

Methods	Parameters	Descriptions
add(value)	Number	Adds a value to the loading indicator.
decrease(value)	Number	Decreases a value to the loading indicator.
continousStart(startingValue)	Number (optional)	Starts the loading indicator with a random starting value between 20-30, then repetitively after an interval of 1s increases it by a random value between 2-10. This continues until it reaches 90% of the indicator's width.
staticStart(startingValue)	Number (optional)	Starts the loading indicator with a random starting value between 30-50.
complete()		Makes the loading indicator reach 100% of his width and then fade.

Properties

Property	Type	Default	Description
progress	Number	0	The progress/width indicator, progress prop varies from 0 to 100.
color	String	red	The color of the loading bar, color take values like css property background-color: do, for example red, #000 rgb(255,0,0) etc.
background	String		The background css property of the bar. Can be used for gradients, images, etc.
height	Number	3	The height of the loading bar in pixels.
className	String		You can provide a class you'd like to add to the loading bar to add some styles to it
onLoaderFinished	Function		This is called when the loading bar completes, reaches 100% of his width.
onProgressChange	Function		This is called each time loading bar value changes.
onRef	Function		This is used to access built in methods

Projects using react-top-loading-bar

• React Movies
• WCYB

Add your own project. Make a PR

Code Style

License

MIT © Klendi Gocci | klendi.me