rl
react-loadingbar
npm i react-loadingbar
rl

react-loadingbar

Simplest Youtube Like Loading Bar Component For React Js. http://bosnaufal.github.io/react-loading-bar/

by Naufal Rabbani

0.0.1 (see all)License:MITTypeScript:Not Found
npm i react-loadingbar
Readme

React Loading Bar

Simplest Youtube Like Loading Bar Component For React JS

DEMO

Install

You can import react-loading-bar to your react component file like this and process it with your preprocessor.

or

You can install it via NPM

npm install react-loadingbar

Usage


import React from 'react';
import ReactDOM from 'react-dom';

import LoadingBar from 'react-loadingbar';

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      progress: 0,
      error: false
    }
  }

  render(){
    return(
      <LoadingBar
        progress={ this.state.progress }
        error={ this.state.error }
        onErrorDone={ this.errorDone.bind(this) }
        onProgressDone={ this.progressDone.bind(this) } />
    )
  }

  // Callback
  errorDone(){
    this.setState({ error: false })
  }

  progressDone() {
    this.setState({ progress: 0 })
  }

}


ReactDOM.render(<App />, document.getElementById("app"))


Usage With Full Props


  render(){
    return(
      <LoadingBar
        id="loadingbar-id"
        className="custom loading-bar className"
        progress={ this.state.progress }
        direction={ this.state.direction }
        error={ this.state.error }
        onErrorDone={ this.errorDone.bind(this) }
        onProgressDone={ this.progressDone.bind(this) } />
    )
  }


Props

id (String)

custom Id in react-loadingbar component

className (String)

custom className in react-loadingbar component

progress (Number)

The Progress Percentage of react-loadingbar component

direction (String)

The Animation Direction of react-loadingbar component. You can fill it with 'right' or 'left' default is 'right'

error (Boolean)

Indicate the component to showing the error state.

onErrorDone (Function)

Should change the parent state when the loadingbar has finished with its error state

onProgressDone (Function)

Should netralize the parent's progress state to be 0

Thank You for Making this useful~

Let's talk about some projects with me

Just Contact Me At:

License

MIT Copyright (c) 2016 - forever Naufal Rabbani

Downloads/wk

3

GitHub Stars

39

LAST COMMIT

6yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
0.0.1
latest
6yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate