CODEWITHSUNDEEP
reactjsmaterial-ui
kilogram
kilogram

Reputation: 717

Place Material-ui icon inside circular progress indicator

I would like to use a circular progress indicator from Material-UI in the header of my app. But I just dont know how to fit nicely a download icon from Material Icons inside so that progress bar will move around the icon. Here is what I have now: enter image description here

and I want to achieve this:

enter image description here

I tried to place icon with absolute positioning, but probably there is a better idea

import React from "react";
import ReactDOM from "react-dom";
import CircularProgress from "@material-ui/core/CircularProgress";
import Button from "@material-ui/core/Button";
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import VerticalAlignBottomIcon from '@material-ui/icons/VerticalAlignBottom';


function CircularStatic() {
  const [completed, setCompleted] = React.useState(0);

  React.useEffect(() => {
    function progress() {
      setCompleted((prevCompleted) =>
        prevCompleted >= 100 ? 0 : prevCompleted + 10
      );
    }

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

  return (
    <div>
      <Button variant="contained" color="primary">
        <CircularProgress variant="static" value={completed} color="inherit">
		</CircularProgress>
      </Button>
    </div>
  );
}


function ButtonAppBar() {
  return (  
      <AppBar position="static" style={{ backgroundColor: 'teal' }}>
        <Toolbar>
          <IconButton edge="start" color="inherit">
			<VerticalAlignBottomIcon />
			<CircularStatic/>
          </IconButton>
        </Toolbar>
      </AppBar>
  );
}

ReactDOM.render(<ButtonAppBar />, document.getElementById("root"));

Upvotes: 2

Views: 6965

Answers (1)

MyDearNia
MyDearNia

Reputation: 76

I customized a little, the Material-UI documentation example here

function CircularProgressWithContent(props) {
    return (
        <Box position="relative" display="inline-flex">
        <CircularProgress  />
        <Box
            top={0}
            left={0}
            bottom={0}
            right={0}
            position="absolute"
            display="flex"
            alignItems="center"
            justifyContent="center"
        >
            <Typography variant="caption" component="div" color="textSecondary">
                {props.content}
            </Typography>
        </Box>
        </Box>
    );
}
And to use it :

 <CircularProgressWithLabel content={<LockOutlinedIcon />} />

It's perfectible but it works well for your use case.

Upvotes: 6

Related Questions