@mui/material#LinearProgress JavaScript Examples

The following examples show how to use @mui/material#LinearProgress. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: MatxProgressBar.jsx    From matx-react with MIT License 5 votes vote down vote up 
CustomLinearProgress = styled(LinearProgress)(() => ({
  borderRadius: 2,
  background: 'rgba(0, 0, 0, 0.1)',
}))
Example #2
Source File: AppProgress.jsx    From matx-react with MIT License 5 votes vote down vote up 
AppProgress = () => {
    const [completed, setCompleted] = React.useState(0)

    React.useEffect(() => {
        function progress() {
            setCompleted((oldCompleted) => {
                if (oldCompleted === 100) {
                    return 0
                }
                const diff = Math.random() * 10
                return Math.min(oldCompleted + diff, 100)
            })
        }

        const timer = setInterval(progress, 500)
        return () => {
            clearInterval(timer)
        }
    }, [])

    return (
        <ProgressRoot>
            <div className="breadcrumb">
                <Breadcrumb
                    routeSegments={[
                        { name: 'Material', path: '/material' },
                        { name: 'Prgress' },
                    ]}
                />
            </div>
            <SimpleCard title="Circuar Progress (Indeterminate)">
                <CircularProgress className="progress" />
                <CircularProgress className="progress" color="secondary" />
            </SimpleCard>
            <Box py="12px" />
            <SimpleCard title="Circuar Progress (static)">
                <CircularProgress
                    value={25}
                    variant="determinate"
                    className="progress"
                />
                <CircularProgress
                    value={50}
                    variant="determinate"
                    className="progress"
                    color="secondary"
                />
                <CircularProgress
                    value={75}
                    variant="determinate"
                    className="progress"
                    color="secondary"
                />
            </SimpleCard>
            <Box py="12px" />
            <SimpleCard title="Linear Progress (Indeterminate)">
                <LinearProgress />
                <br />
                <LinearProgress color="secondary" />
            </SimpleCard>
            <Box py="12px" />
            <SimpleCard title="Linear Progress (Determinate)">
                <LinearProgress variant="determinate" value={completed} />
                <br />
                <LinearProgress
                    color="secondary"
                    variant="determinate"
                    value={completed}
                />
            </SimpleCard>
        </ProgressRoot>
    )
}
Example #3
Source File: TopBar.js    From admin-web with GNU Affero General Public License v3.0 4 votes vote down vote up 
render() {
    const { classes, t, profile, title, onAdd, fetching, settings, license } = this.props;
    const { menuAnchorEl } = this.state;
    const licenseVisible = this.context.includes(SYSTEM_ADMIN_WRITE);
  
    return (
      <AppBar position="fixed" className={classes.root}>
        <Toolbar className={classes.root}>
          <Hidden lgUp>
            <IconButton color="inherit" onClick={this.handleMenuToggle} size="large">
              <Burger />
            </IconButton>
          </Hidden>
          {this.links.map((link, idx) =>
            <Tooltip
              placement="bottom"
              title={t(link.title) + (!config[link.key] ? ` (${t("Not configured")})` : '')} key={idx}
            >
              <span>
                <IconButton
                  href={config[link.key]}
                  disabled={!config[link.key]}
                  target="_blank"
                  className={classes.iconButton}
                  size="large">
                  <link.icon />
                </IconButton>
              </span>
            </Tooltip>
          )}
          {title && <Typography className={classes.title} variant="h6">{title}</Typography>}
          <div className={classes.flexEndContainer}>
            <Box className={classes.profileButton} onClick={this.handleMenuOpen('menuAnchorEl')}>
              <Typography className={classes.username}>{profile.Profile.user.username}</Typography>
              <AccountCircleIcon className={classes.profileIcon}></AccountCircleIcon>
            </Box>
            {licenseVisible && <LicenseIcon
              activated={license.product && license.product !== "Community"}
              handleNavigation={this.handleNavigation}
            />}
            <img
              src={settings.language === 'en-US' ? german : english}
              alt=""
              width={35}
              height={44}
              className={classes.flag}
              onClick={this.handleLangChange}
            />
            <Menu
              id="simple-menu"
              anchorEl={menuAnchorEl}
              keepMounted
              open={Boolean(menuAnchorEl)}
              onClose={this.handleMenuClose('menuAnchorEl')}
            >
              <MenuItem onClick={this.handleNavigation('settings')}>
                {t('Settings')}
              </MenuItem>
              <MenuItem onClick={this.handleNavigation('changePassword')}>
                {t('Change password')}
              </MenuItem>
              <MenuItem onClick={this.handleLogout}>
                {t('Logout')}
              </MenuItem>
            </Menu>
          </div>
          {onAdd && <div className={classes.divider}></div>}
          {onAdd && <Button onClick={onAdd} color="inherit" className={classes.add}>
            <Add />{t('Add')}
          </Button>}
        </Toolbar>
        <Fade
          in={fetching}
          style={{
            transitionDelay: '500ms',
          }}
        >
          <LinearProgress variant="indeterminate" color="primary"/>
        </Fade>
      </AppBar>
    );
  }