0.1.2 • Published 8 years ago
react-loadbar v0.1.2
react-loadbar
A super simple and minimal progress bar with optional spinner.
Preview :eyes:
:white_check_mark: Fully customizable
:white_check_mark: Lightweight bundle
:white_check_mark: No dependencies included
Storybook Examples
Installation
npm install react-loadbar --save
Usage
import 'react-loadbar/dist/styles.css'
import { LoadBar } from 'react-loadbar'
class MyCmpt extends React.Component {
state = { downloadProgress: 0 }
_onVisibilityChange = isVisible => {
if (isVisible) {
console.log('load started!')
} else {
console.log('load complete!')
}
}
render() {
// All of these are optional except for percent
return (
<LoadBar percent={this.state.downloadProgress}
onVisibilityChange={this._onVisibilityChange}
barStyle={{ background: 'slateblue' }}
spinnerStyle={{ borderColor: 'slateblue' }} />
)
}
}LoadBar
A simple, dumb component which simply displays the loading percent you provide to it.
| Prop | Default | Type | Optional | Description |
|---|---|---|---|---|
percent | 1 | number | No | Determines the width of the loading bar |
onVisibilityChange | undefined | (boolean) => void | Yes | Callback which receives true when the loading bar goes from hidden -> visible, and false when it goes from visible -> hidden |
barStyle | {} | Object | Yes | Style properties applied directly on the loading bar |
showSpinner | true | boolean | Yes | Visibility of the spinner |
spinnerStyle | {} | Object | Yes | Style properties applied directly on the spinner element |
import 'react-loadbar/dist/styles.css'
import { SimulatedLoadBar } from 'react-loadbar'
class MyCmpt extends React.Component {
state = { isLoading: false, text: '' }
_fetchData = async () => {
try {
this.setState({ isLoading: true })
const res = await fetch('/api', { method: 'get' })
this.setState({ text: await res.text() })
} catch (err) {
console.error(err)
} finally {
this.setState({ isLoading: false })
}
}
componentDidMount() {
this._fetchData()
}
render() {
// All values are optional
return (
<div>
<SimulatedLoadBar isLoading={this.state.isLoading}
timeMs={2000}
numTicks={20}
barStyle={{ background: 'slateblue' }} />
<p>{this.state.text}</p>
</div>
)
}
}SimulatedLoadBar
A loading bar component based on LoadBar which simulates loading. Inherits the same set of props from LoadBar, but ignores the percent property. The SimulatedLoadBar controls the value of the percent prop internally.
| Prop | Default | Type | Optional | Description |
|---|---|---|---|---|
onPercentChange | undefined | (number) => void | Yes | Invoked at every tick of the simulated load when the internal value of percent changes |
timeMs | 8000 | number | Yes | Number of milliseconds it takes for the loading bar to reach 95%, at which point the bar animation stops indefinitely until the user sets isLoading to false |
numTicks | 16 | number | Yes | Number of ticks it takes for the internal percent value to reach 95%. This number is distributed evenly over the given timeMs so the time between each tick is roughly timeMs ÷ numTicks |
isLoading | true | boolean | Yes | If set to true, the loading simulation and animation will begin immediately. If set to false, the animation will fast forward to 100% and transition to being hidden |
Styling
All elements are easily targettable with CSS. To view the classes and base styles, see the source .scss file.
License
(c) 2017 John Bernardo, MIT license.