Basic

Navigation

1. custom-style

Basic

html .loading--night .r-loading-mask {
    background-color: rgba(1,1,1,.2);
}

var React = require('react')
var Loading = require('loading.react').default
var App = React.createClass({
    getInitialState: function () {
        return {
            show: true
        }
    },
    render: function () {
        var self = this
        return (
            <div>
                default:
                <Loading />
                tip:
                <Loading tip="loading..." />
                size-m:<Loading size="m" />
                size-l:<Loading size="l" />
                size-fill:
                <div style={{width:100, height:100}} >
                    <Loading size="fill" ></Loading>
                </div>
                <hr />
                children:
                <Loading>
                    <input type="text"/><button type="button" >search</button>
                </Loading>
                <hr />
                children: loading:false :
                <Loading loading={false} >
                    <input type="text"/><button type="button" >search</button>
                </Loading>
                <hr />
                empty span:
                <div style={{width:100,height:100,border: '1px solid #ECECEC'}} >
                    <Loading style={{height:'100%'}} >
                        <span></span>
                    </Loading>
                </div>
                <hr />
                effect opacity
                <Loading effect="opacity">
                    <input type="text"/><button type="button" >search</button>
                </Loading>
                <hr />
                customPosition:
                <div style={{width:100}}>
                    <Loading
                        customPosition
                        tip={(
                            <div style={{textAlign: 'center',lineHeight: '100px'}} >loading..</div>
                        )}
                     >
                        <div style={{width:'100',height:'100',backgroundColor: '#ABCDEF'}}>abcdef</div>
                    </Loading>
                </div>
                <hr/>
                r-loading--customPostion: loading:false
                <div style={{width:100}}>
                    <Loading
                        loading={false}
                        className="r-loading--customPostion"
                        tip={(
                            <div style={{textAlign: 'center',lineHeight: '100px'}} >loading..</div>
                        )}
                     >
                        <div style={{width:'100',height:'100',backgroundColor: '#ABCDEF'}}>abcdef</div>
                    </Loading>
                </div>
                <hr/>
                When parent <code>loading:true</code>, children <code>loading</code> always <code>false</code>
                <Loading >
                    1<br />
                    2<br />
                    <Loading style={{width:40}} >
                        sub content
                    </Loading>
                    3<br />
                    4<br />
                </Loading>
                parent loading:false
                <Loading loading={false} >
                    1<br />
                    2<br />
                    <Loading style={{width:40}} >
                        sub content
                    </Loading>
                    3<br />
                    4<br />
                </Loading>
                <hr/>
                classname:
                <Loading className="loading--night" effect={false}>
                    <input type="text"/><button type="button" >search</button>
                </Loading>
            </div>
        )
    }
})
module.exports = App

./basic.demo.js