[Material UI] React Mui Spinner ? Progress ? Component 만드는 법

🤔 제작동기

토이프로젝트에서 상세 페이지 첫 진입시에 progress를 넣어야 할 부분이 생겼다. 원형 모양의 Progress bar를 제작하려고 한다.

 

📚 사용할 라이브러리들

1. mui - CircularProgress

https://mui.com/api/circular-progress/

CircularProgress API - MUI

 

 

👽 소스를 보자

import React from 'react'
import {Box, Fade, CircularProgress} from '@mui/material/';
import { makeStyles, createStyles } from '@material-ui/styles';
 
const useStyles = makeStyles(() =>
  createStyles({
    circle: {
        display:'flex',
        flexDirection: 'column',
        alignItems: 'center',
        zIndex: 9999,
    },
  }),
);
 
const Progress = (props) => {
  const classes = useStyles({});
  return (
    <div className={classes.circle} >
    <Fade in={props.isFade} >
        <Box sx={{ boxShadow: 3, backgroundColor:'white' }}>
            <CircularProgress
                color="error"  />
        </Box>
    </Fade>
    </div>
  )
}
 
export default Progress