kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
31 wiersze
775 B
TypeScript
31 wiersze
775 B
TypeScript
|
import React from 'react';
|
||
|
|
import { FormattedMessage } from 'react-intl';
|
||
|
|
|
||
|
|
import Stack from '../stack/stack';
|
||
|
|
import Text from '../text/text';
|
||
|
|
|
||
|
|
import './spinner.css';
|
||
|
|
|
||
|
|
interface ILoadingIndicator {
|
||
|
|
size?: number,
|
||
|
|
withText?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
const LoadingIndicator = ({ size = 30, withText = true }: ILoadingIndicator) => (
|
||
|
|
<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 LoadingIndicator;
|