import React from 'react'; import { FormattedMessage } from 'react-intl'; import Stack from '../stack/stack'; import Text from '../text/text'; import './spinner.css'; interface ISpinner { /** Width and height of the spinner in pixels. */ size?: number /** Whether to display "Loading..." beneath the spinner. */ withText?: boolean } /** Spinning loading placeholder. */ const Spinner = ({ size = 30, withText = true }: ISpinner) => ( <Stack space={2} justifyContent='center' alignItems='center'> <div className='spinner' style={{ width: size, height: size }}> {Array.from(Array(12).keys()).map(i => ( <div key={i}> </div> ))} </div> {withText && ( <Text theme='muted' tracking='wide'> <FormattedMessage id='loading_indicator.label' defaultMessage='Loading…' /> </Text> )} </Stack> ); export default Spinner;