application/components/common/loading-indicator.js

import React from 'react';
import RefreshIndicator from 'material-ui/RefreshIndicator';

/**
 * Wrapper for materialize spinner
 */
class LoadingIndicator extends React.Component {
    render() {
        let styles = {};
        if (this.props.centered === true) {
            const offsetLeft = 45;
            const offsetTop = 30;

            styles = {
                position: 'fixed',
                left: offsetLeft + '%',
                top: offsetTop + '%',
                padding: '20px',
                boxShadow: 'rgba(0, 0, 0, 0.19) 0px 10px 30px, rgba(0, 0, 0, 0.23) 0px 6px 10px',
                borderRadius: '3px',
                backgroundColor: '#f1f1f1',
                zIndex: 99999
            };
        }

        return (
            <div className="row center-xs middle-xs" style={styles}>
                <div className="col-xs-12" style={{'position': 'relative', textAlign:'center'}}>
                    <RefreshIndicator
                        size={40}
                        left={0}
                        top={0}
                        status="loading"
                        style={{display: 'inline-block', position: 'relative'}}
                    />
                </div>
            </div>
        );
    }
}

export default LoadingIndicator;