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!
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!
Share Improve this question asked Apr 14, 2017 at 23:33 JessieJessie 911 gold badge2 silver badges5 bronze badges 1- Looking at the google images for the circular progress meter provided by material ui it appears one can change the inner text. – ipatch Commented Apr 15, 2017 at 1:52
4 Answers
Reset to default 4You 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.
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.
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>
Like Mike pointed out, In Mui there is no built in support for adding text inside progressbar. Using css absolute property is an option ,but can have potential responsiveness issues. I suggest to use React-circular-progressbar as an alternative. It is responsive, but make sure you use it within some other parent element like Box/Paper or anything else of required size.