react-loader-bubble

A loading component for React.

Try it live!

Installation

npm i -S react-loader-bubble

Usage

Global Loading

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import Loader from 'react-loader-bubble'
//...
 
const Demo = ({loading})=>(
    <Container>
        <Content>...</Content>
        //...
        <Loader loading={loading} />
    </Container>
)
 
ReactDOM.render(<Demo loading={true} />,document.getElementById('container'))

Partial Loading

Wrap your component where you want partial loading.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import Loader from 'react-loader-bubble'
//...
 
const Demo = ({loading})=>(
    <Container>
        <Content>...</Content>
        //...
        <Loader loading={loading}>
            <Panel>
                ...
            </Panel>
        </Loader>
    </Container>
)
 
ReactDOM.render(<Demo loading={true} />,document.getElementById('container'))

Props

Property	Type	Default	Description
color	string	#3da5d9(light blue)	Set color of loading component
size	string	normal	Set size of loading component, value could be small, normal or large.
loading	boolean	false	Set as true and display loading.
text	string	""	Display loading text if value is not empty.
wrap	boolean	false	Set loading component whether be wrapped by a parent element.
indicator	React Node	null	Customize loading indicator.
background	string	rgba(255, 255, 255, 0.3)	Set background color of loading mask.

License

MIT