@material-ui/core#CircularProgress JavaScript Examples

AppSettingsContainer = () => {
  const { isLoadingSettings } = useSettings();

  return (
    <>
      <AutoUpdater />

      {isLoadingSettings ? (
        <Box display="flex" alignItems="center" justifyContent="center" height="100%" width="100%" flexDirection="column">
          <Box paddingBottom="1rem">
            <CircularProgress size="3rem" />
          </Box>
          <div>
            <Typography variant="h5">Loading settings...</Typography>
          </div>
        </Box>
      ) : (
        <AppContainer />
      )}
    </>
  );
}

export default function LoadingButton(props) {
  const classes = useStyles();
  const { children, loading, valid, success, fail, onClick, ...other } = props;
  return (
    <div className={classes.wrapper}>
      <Button
        variant="contained"
        color="primary"
        fullWidth
        disabled={loading || !valid}
        type="submit"
        onClick={onClick}
        {...other}
      >
        {children}
      </Button>
      {loading && <CircularProgress size={24} className={classes.progress} />}
    </div>
  );
}

Callback = () => {
  const { authService } = useOktaAuth();
  const location = useLocation();
  const { push } = useHistory();

  useEffect(() => {
    const { oauth_token, oauth_verifier } = queryString.parse(location.search);
    axiosWithAuth(authService)
      .post("/auth/twitter/callback", {
        oauth_token,
        oauth_verifier,
      })
      .then((res) => push("/home"))
      .catch((err) => {
        console.error(err);
        push("/connect/twitter");
      });
    // eslint-disable-next-line
  }, []);

  return (
    <div style={container}>
      <Typography variant="h6">Redirecting you back to SoMe</Typography>
      <br />
      <CircularProgress />
    </div>
  );
}

function QuizLoading() {
	return (
		<div className="loading-screen">
			<CircularProgress color="primary" />
			<div className="loader">Loading Quizzes
				<span className="loader__dot">.</span>
				<span className="loader__dot">.</span>
				<span className="loader__dot">.</span></div>
		</div>
	);
}

/**
 * 
 * @param {{colSpan: number}} props 
 */
export function TableLodingProgress({ colSpan }) {
  return (
    <TableRow>
      <TableCell colSpan={colSpan} align="center">
        <CircularProgress/>
      </TableCell>
    </TableRow>
  )
}

/**
 * @param {{
 *   color?: string,
 *   data: any,
 *   Icon: Object,
 *   classes: any,
 *   label: string
 * }} props
 */
function DashStat(props) {
  const { data, Icon, label, color = '#000000', classes } = props;

  return (
    <div className={classes.dashstatCard}>
      <div className={classes.dashstatIconContainer}>
        <div
          className={classes.dashstatCircleIcon}
          style={{ backgroundColor: color }}
        ></div>
        <Icon className={classes.dashstatIcon} style={{ color: color }}></Icon>
      </div>
      <div className={classes.dashstatText}>
        <h3>{data || <CircularProgress size={'32px'} style={{ color }} />}</h3>
        <p className={classes.dashstatLabel}>{label}</p>
      </div>
    </div>
  );
}

SimpleLoader = () => {
  const useStyles = makeStyles(theme => ({
    backdrop: {
      zIndex: theme.zIndex.drawer + 1,
    },
  }));

  return (
    <Backdrop open className={useStyles().backdrop}>
      <CircularProgress />
    </Backdrop>
  );
}

getDataButtons() {
        return this.timelineModules.map((module, index) => {
            const completed = this.state.completedPlugins.includes(module.name);

            return (
                <Grid key={index} item style={{ width: '80px' }}>
                    <Link
                        id={module.name}
                        onClick={e => this.changeTimelineModule(e)}
                        className={this.getButtonStyle(module.name)}
                    >
                        <div style={{ width: '32px', height: '32px' }}>
                            {completed ? (
                                getIcon(module.icon, 32, this.getDataButtonColor(module.name))
                            ) : (
                                <CircularProgress color="primary" size={32} />
                            )}
                        </div>

                        <Typography
                            className="plugin-name"
                            align="center"
                            style={{ color: this.getDataButtonColor(module.name), marginTop: '5px' }}
                        >
                            {module.name}
                        </Typography>
                    </Link>
                </Grid>
            );
        });
    }

render() {
        let subComponent;
        if (this.state.isLoading === true) {
            subComponent =
                <div className='loader-wrapper'>
                    <CircularProgress />
                </div>
        } else if (this.state.showInfo) {
            subComponent =
                <div>
                    <p>{this.state.ticker}</p>
                    <p>{this.state.companyInfo.name}</p>
                    <a href={this.state.companyInfo.companyWebUrl}>
                        <img src={this.state.companyInfo.logoUrl} alt="Company Logo"></img>
                    </a>
                    <p>IPO Date: {this.state.companyInfo.ipoDate}</p>
                    <p>Exchange: {this.state.companyInfo.exchange}</p>
                    <p>Market Cap: {this.state.companyInfo.marketCap}</p>
                    <p>Share Outstanding: {this.state.companyInfo.shareOutstanding}</p>
                    <p>Industry: {this.state.companyInfo.industry}</p>
                </div>
        }
        return (
            <div>
                {subComponent}
            </div>
        );
    }

ConfirmedBooking = (props) => {
  const { history, booking, loading } = props;
  const toLoad = loading ? <div className={style.loader}><CircularProgress /></div>
    : (
      <div className={style.confirmContainer}>
        <p className={style.title}>{confirmedMessages.title}</p>
        <p>{`Booking reference is: ${booking.reservationID}`}</p>
        <Button onClick={() => changePath("/", history)} className={style.finishButton}>
          {confirmedMessages.buttonText}
        </Button>
      </div>
    );
  return toLoad;
}

export default function FieldControlDialog(props) {
  return (
    <Dialog
      open={props.open}
      onClose={props.closeDialog}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      maxWidth={'lg'}
    >
      <DialogTitle id="alert-dialog-title">{props.title}</DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description"></DialogContentText>
        <div>
          <DndProvider backend={props.backend}>{props.component}</DndProvider>
        </div>
      </DialogContent>
      <DialogActions>
        <Button onClick={props.action} color="primary" autoFocus>
          {props.actionProcess && <CircularProgress size={24} />}
          {!props.actionProcess && 'Save'}
        </Button>
        <Button onClick={props.closeDialog} color="primary" autoFocus>
          Cancel
        </Button>
      </DialogActions>
    </Dialog>
  );
}

LoadingSpinner = ({ text }) => {
  const classes = usePostListStyles();

  return (
    <div className={classes.loadSpinner}>
      <CircularProgress size="6em" disableShrink />
      <Typography color="primary" variant="body1">
        {text}
      </Typography>
    </div>
  );
}

LoadMoreButton = ({ handleLoadPosts, loading }) => {
  const classes = useQuesListStyles();

  return (
    <div className={classes.loadBtnWrapper}>
      <Button
        color="primary"
        variant="outlined"
        size="large"
        onClick={handleLoadPosts}
        startIcon={!loading && <AutorenewIcon />}
        className={classes.loadBtn}
        disabled={loading}
      >
        {loading && (
          <CircularProgress
            disableShrink
            size={22}
            style={{ marginRight: '1em' }}
          />
        )}
        {loading ? 'Loading...' : 'Load More'}
      </Button>
    </div>
  );
}

render() {
        let {classes} = this.props;
        const {color, onClick, className, disabled, type} = this.props;
        return(
            <Button type={type || "button"} color={color} onClick={onClick} disabled={(disabled || this.props.loading)} className={className} variant='contained'>
                <span className={classes.span}>{this.props.children} {this.props.loading ? <CircularProgress className={classes.progress} color="secondary" size="1rem"/> : null} </span>
            </Button>
        )
    }

Contributors = () => {
    const classes = useStyles();

    const { loading, error, data } = useQuery(repository(), {
        context: { clientName: "github" }
    });
    if (error) console.log(error)
    if (error || !data)
        return (<Fragment></Fragment>)

    return (
        <Grid container className={classes.subtitle}>
            <Grid item xs={12}>
                <Typography variant="h6" color="textSecondary" paragraph align="center">Our contributors:</Typography>
            </Grid>
            <Grid item xs={12}>
                <Grid container direction="row" justify="center" spacing={2}>
                    {loading ? <CircularProgress align="center" /> : <Fragment />}
                    {data && [...new Map([...data.contributors_subgraph, ...data.contributors_fyi].filter(o => { return o.login != "dependabot[bot]" }).map(o => [o.login, o])).values()].map(edge =>

                        <Grid item key={edge.login}>
                            <Link href={"https://github.com/" + edge.login}>

                                <ContributorAvatar
                                    tooltip
                                    clickable
                                    contributor={edge}
                                />
                            </Link>
                        </Grid>
                    )}

                </Grid>
            </Grid>
        </Grid>
    )
}

ButtonWithSpinner = ({ loading, children, ...rest }) => {
	const classes = useStyles();

	return (
		<Button className={classes.button} disabled={loading} {...rest}>
			{children}
			{loading && (
				<CircularProgress size={24} className={classes.buttonProgress} />
			)}
		</Button>
	);
}

DefaultHookQuery = ({
    children,
    fetchData,
    backgroundUpdate = false,
}) => {
    const { loading, error, ...dataProps } = fetchData;

    if (loading && (!backgroundUpdate || dataProps.response == null)) {
        return (
            <div className="d-flex justify-content-center">
                <CircularProgress />
            </div>
        );
    }

    if (error) {
        return <Alert color="danger">Something happened</Alert>;
    }

    return children(dataProps);
}

Metrics = () => {
  const {loading, error, data} = useQuery(query);
  const [newMetricName, setNewMetricName] = useState("");
  const [addMetric, { loading: mutationLoading }] = useMutation(addMetricMutation, {
    awaitRefetchQueries: true,
    refetchQueries: [{query}],
  });

  const metrics = data?.queryMetric || []

  return <>
    <Navbar title="Metrics" color="primary" />
    <Content>
      {loading && <Backdrop open={loading || mutationLoading} >
        <CircularProgress />
      </Backdrop>}
      {error && <Alert severity="error">Something Went Horribly Wrong</Alert>}
      <Card style={{ padding: 30 }}>
        <Typography>Here are the metrics currently configured:</Typography>
        <List>
          {metrics.map(({ name }, index) => <ListItem item key={index} sm={12} md={6} lg={3}>
            <Typography>{name}</Typography>
          </ListItem>)}
        </List>

        <TextField
          label="Add Metric"
          defaultValue={newMetricName}
          onChange={e => setNewMetricName(e.target.value)}
        />
        <UglyButton onClick={() => addMetric({ variables: { newMetricName } })} disabled={newMetricName === ""}>
          Add Metric
        </UglyButton>
      </Card>
    </Content>
  </>
}

export default function Spinner() {
  const classes = useStyles();

  return (
    <Backdrop className={classes.backdrop} open>
      <CircularProgress color='inherit' />
    </Backdrop>
  );
}

MissionList = ({ missions, ...rest }) => {
  return (
    <MissionListWithLoading LoadingComponent={CircularProgress} {...rest}>
      {missions.map((mission) => (
        <MissionCard mission={mission} key={`mission-card-${mission.uid}`} role="listitem" />
      ))}
    </MissionListWithLoading>
  );
}

ControlButtons = ({ onDeleteComplete, value }) => {
  const classes = useStyles();
  const [{ data = {}, loading }, doDelete] = useAxios(
    {
      url: `/api/Game/World/Boss/Feature/Message/${value}`,
      method: "DELETE",
    },
    { manual: true }
  );

  const handleDelete = () => {
    doDelete();
  };

  useEffect(() => {
    if (data.message === "success") {
      onDeleteComplete();
    }
  }, [data]);

  return (
    <div className={classes.wrapper}>
      <ButtonGroup color="primary" variant="outlined" disabled={loading}>
        <Button component={Link} to={`/Admin/WorldbossMessage/Update/${value}`}>
          更新
        </Button>
        <Button color="primary" variant="outlined" onClick={handleDelete}>
          刪除
        </Button>
      </ButtonGroup>
      {loading && <CircularProgress size={24} className={classes.buttonProgress} />}
    </div>
  );
}

renderControls() {
        const {isLoading} = this.state;
        let childComponent;
        if(isLoading){
            childComponent = <CircularProgress disableShrink style={{margin: 20 }} />
        }
        else{
            childComponent  = (
                <ButtonGroup color="primary" aria-label="contained primary button group">
                    <IconButton onClick={this.btnStartCamClickEvt} disabled={isLoading}>
                        <PlayIcon fontSize="large"/>
                    </IconButton>
                    <IconButton onClick={this.btnStopCamClickEvt} disabled={isLoading}>
                        <StopIcon fontSize="large"/>
                    </IconButton>
                </ButtonGroup>
            )
        }
        return <Grid container
                     spacing={0}
                     direction="column"
                     alignItems="center"
                     justify="center">
            <Grid item xs={12}>
                <DevicePicker ref={this.devicePickerRef} onLoaded={() => this.setState({ isLoading: false })}/>
            </Grid>
            <Grid item xs={12}>
                {childComponent}
            </Grid>
        </Grid>;
    }

AppToolbar = ({username, loadingState}) => {
   const classes = useStyles();

   return (
      <div className={classes.root}>
         <AppBar position="static">
            <Toolbar>
               {loadingState === FETCHING &&
                  <CircularProgress color="secondary"/>
               }

               {loadingState === ERROR &&
               "Error loading user info"
               }

               {loadingState === SUCCESS && <>
                  <Typography className={classes.title} variant="h6" noWrap>
                     You are logged in as {username}
                  </Typography>
                  <div className={classes.login}>
                     <Link to={AUTH_PATH} className="AuthLink">{username}</Link>
                  </div>
               </>}
            </Toolbar>
         </AppBar>
      </div>
   );
}

Message = ({ name, content, isLoading }) => {

    const classNames = classnames('Message', { 'Message Robot': name === 'Robot' });

    if (isLoading === true) {
        return <CircularProgress />
    }

    return (
        (
            <div className={classNames}>
                <strong>{name}: </strong>
                {content}
            </div>)
    );

}

CircularProgressWrapper = props => {
  const classes = useStyles();
  const { color, size, thickness } = props;
  return (
    <div>
      <CircularProgress color={color || 'primary'} className={classes.progress} size={size || 300} thickness={thickness || 2} />
    </div>
  );
}

// Play/Pause, previous , next Buttons
function PlayerControls({
  playPreviousSong,
  playPauseSong,
  playing,
  playNextSong,
}) {
  return (
    <div className="playercontrols">
      <IconButton
        onClick={playPreviousSong}
        className="player__iconButton player__iconPrevBtn"
      >
        <SkipPreviousRoundedIcon />
      </IconButton>

      <IconButton
        onClick={() => {
          if (playing !== -1) playPauseSong();
        }}
        className="player__iconButton player__mainBtn"
      >
        {playing === 1 ? (
          <PauseCircleOutlineRoundedIcon />
        ) : playing === 0 ? (
          <PlayCircleFilledWhiteOutlinedIcon />
        ) : (
          <CircularProgress size={20} color="inherit" />
        )}
      </IconButton>

      <IconButton onClick={playNextSong} className="player__iconButton">
        <SkipNextRoundedIcon />
      </IconButton>
    </div>
  );
}

export default function LoadingBox() {
  return (
    <Box m={3} className={styles.container}>
      <Typography>{'در حال بارگزاری'}</Typography>
      <Box ml={2}>
        <CircularProgress size={24} />
      </Box>
    </Box>
  );
}

function LoadingShell() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <CircularProgress />
      <Typography className={classes.text}>Loading Shell</Typography>
    </div>
  );
}

function Button ({
  children,
  style,
  onClick,
  type,
  disabled,
  loading,
  tooltip = '',
  className
}) {
  return (
    <div
      style={style}
      className={[
        styles.Button,
        type === 'primary' ? styles.primary : '',
        type === 'secondary' ? styles.secondary : '',
        type === 'outline' ? styles.outline : '',
        loading ? styles.disabled : '',
        disabled ? styles.disabled : '',
        className
      ].join(' ')}
      onClick={loading || disabled ? null : onClick}
    >
      {children}
      {loading && (
        <Tooltip title={tooltip}>
          <div className={styles.loading}>
            <CircularProgress size={14} color='inherit' />
          </div>
        </Tooltip>
      )}
    </div>
  );
}