@brightlayer-ui/react-auth-workflow/components/Spinner/Spinner.js

Re-usable workflow components for Authentication and Registration within Eaton applications.

import React from 'react';
import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/material/Box';
/**
 * Component that renders a indeterminate circular progress spinner atop a semi-transparent white background.
 *
 * @param {SpinnerProps} props - props of spinner component
 *
 * @category Component
 */
export const Spinner = (props) => {
    const { visible, ...otherProps } = props;
    return visible ? (React.createElement(Box, { sx: {
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            zIndex: 1000,
            backgroundColor: 'rgba(255,255,255,0.6)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'column',
        }, ...otherProps },
        React.createElement(CircularProgress, { size: 70, variant: 'indeterminate' }))) : (React.createElement(React.Fragment, null));
};