Text inside Circular Progress of Material UI

I was wondering...does anyone know if it's possible to add customized text on the inside of the a Material UI Circular Progress element? If so, what is the best way to do this? Thanks!

Material-UI is based on the Material Design spec by Google. The spec for "Progress Activity" doesn't have text inside any of the circular elements. MUI is only going to officially support the material design spec.

If you take a look at the code for CircularProgress, then you can see that it is rendering a SVG element. (Also visible in dev tools in your browser.)

I suggest you fork MUI and fiddle with the Circular Progress element until you get what you want.

You can make the text absolute and place it on top of Progress bar.

<div style={{position: 'relative'}}>
    <span style={{position: 'absolute', top: '10px', left: '2px'}}>100%</span>
    <CircularProgress />
</div>

top and left values you can set as per you.

Add <Box/> with display: flex, justifyContent: center and alignItems: center. Also Add position: absolute to <Typography/>

<Box display='flex' justifyContent='center' alignItems='center'>
    <CircularProgress/>
    <Typography position='absolute'>{99}%</Typography>
</Box>

Text inside Circular Progress of Material UI

Related

Recent Posts