Sizing the MUI CircularProgress

user_581205 0
Viewed 12246

I'd like to show the MUI CircularProgress component as big as needed to nearly fill the parent div of an unknown size. Let's say, the size should be 0.8 * min(parent_height, parent_width). I tried fooling with max-width and whatever with no success.

I could use some useDimension hook and measure the parent's size, but I consider it to be the last resort. There must be a pure CSS solution, am I right?

material-ui reactjs progress-bar css html
4 Answers

A bit late to this party, but I had a similar question, but without the parent constraint (I have a specific parent size). For anyone finding this question for that easier case, you can just use:

<CircularProgress size="1rem" />

and in my case

<CircularProgress size="1rem" color="inherit" />
user_30298820

would something like this work for you? This would rely on the parent being assigned a fixed width and height (which is missing in my code), but your question implies that this is the case for you.

export default function Demo() {
  const [parentSize, setParentSize] = useState(0);
  const parentRef = useRef(null);

  useEffect(() => {
    const { clientHeight, clientWidth } = parentRef.current;

    setParentSize(Math.min(clientHeight, clientWidth));
  }, []);

  return (
    <div ref={parentRef}>
      <CircularProgress size={0.8 * parentSize} />
    </div>
  );
}

I'm not 100% sure, but I think CSS Element Queries might solve this also

user_112471750

This could not be an official way. However, you could use this as a little hack when nothing goes right.

<CircularProgress style={{padding: "10px"}} />

Adjust the padding to resize and adjust margin to locate.

user_154294940

A simple approach to setting the size relative to the parent.

<CircularProgress size='80vh' />
user_64125860
Related