Skip to content

Instantly share code, notes, and snippets.

@thclark
Last active February 21, 2019 22:29
Show Gist options
  • Save thclark/e637954f774c17c097f29d765492a377 to your computer and use it in GitHub Desktop.
Save thclark/e637954f774c17c097f29d765492a377 to your computer and use it in GitHub Desktop.
Loading spinner, centred on a page, in React. Designed for use with creative-tim material kit pro, but could be adapted.
import classNames from 'classnames'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import withStyles from '@material-ui/core/styles/withStyles'
import CircularProgress from '@material-ui/core/CircularProgress'
import FullArea from 'components/FullArea'
import GridContainer from 'components/Grid/GridContainer'
import GridItem from 'components/Grid/GridItem'
import loadingPageStyle from '../../assets/jss/material-kit-pro-react/components/loadingPageStyle'
const image = require('assets/img/map.jpg')
class LoadingPage extends Component {
render() {
const { classes } = this.props
return (
<FullArea id="fullarea" vertical>
<div style={{
width: 'inherit',
height: 'inherit',
backgroundImage: `url(${image})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}}>
<GridContainer
direction="row"
justify="center"
alignItems="center"
className={classNames(classes.loaderContainer, classes.loaderFilter)}
>
<GridItem>
<GridContainer
direction="row"
justify="center"
alignItems="center"
className={classes.loaderContainer}
>
<GridItem className={classNames(classes.loaderItem, classes.loaderSpinner)} >
<CircularProgress className={classes.progress} color="white" />
</GridItem>
<GridItem className={classNames(classes.loaderItem, classes.loaderText)} >
{this.props.message}
</GridItem>
</GridContainer>
</GridItem>
</GridContainer>
</div>
</FullArea>
)
}
}
LoadingPage.propTypes = {
message: PropTypes.string,
}
LoadingPage.defaultProps = {
message: 'Loading page...',
}
export default withStyles(loadingPageStyle)(LoadingPage)
// import parallaxStyle from "assets/jss/material-kit-pro-react/components/parallaxStyle.jsx";
const loadingPageStyle = {
loaderFilter: {
background: "rgba(0, 0, 0, 0.5)",
zIndex: "1",
},
loaderContainer: {
height: 'inherit',
},
loaderItem: {
textAlign: 'center',
},
loaderSpinner: {
color: '#ffffff',
},
loaderText: {
color: '#ffffff',
},
}
export default loadingPageStyle
import React, { Component } from 'react'
import { Col, Row } from 'reactstrap'
import PropTypes from 'prop-types'
class LoadingSpinner extends Component {
render() {
return (
<div className="d-flex align-items-center justify-content-center" style={{ height: '20vh' }} >
<div className="placeholder" >
<h4>
<i className="fa fa-spinner fa-pulse loading-spinner" style={{ marginRight: '1rem' }} />
</h4>
</div>
<div className="placeholder" >
<h5>
{this.props.message}
</h5>
</div>
</div>
)
}
}
LoadingSpinner.propTypes = {
message: PropTypes.string,
}
LoadingSpinner.defaultProps = {
message: '',
}
export default LoadingSpinner
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment