All Projects → lonelyclick → react-loading-bar

lonelyclick / react-loading-bar

Licence: other
React Loading Bar

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to react-loading-bar

rprogress
React ajax loader progress bar with clear API
Stars: ✭ 12 (-75.51%)
Mutual labels:  react-progress-bar
react-loading-icons
A TypeScript-React edition of Sam Herbert's amazing SVG Loaders.
Stars: ✭ 32 (-34.69%)
Mutual labels:  react-loading

React Loading Bar

Build Status

Usage

  npm install react-loading-bar --save
import React, { Component } from 'react'
import Loading from 'react-loading-bar'
import 'react-loading-bar/dist/index.css'

export default class LoadingExample extends Component {
  state = {
    show: false
  }

  onShow = ()=> {
    this.setState({ show: true })
  }

  onHide = ()=> {
    this.setState({ show: false })
  }

  render() {
    return (
      <div>
        <Loading
          show={this.state.show}
          color="red"
        />

        <button
          type="button"
          onClick={this.onShow}>
          show
        </button>

        <button
          type="button"
          onClick={this.onHide}>
          hide
        </button>
      </div>
    )
  }
}

Support UMD

Demo

React Loading Bar Example

Option Change

<Loading
  show={true}
  color="red"
  change={false}
  showSpinner={true}
/>

If change set false, will do nothing, default true

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].