CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Jessie
Jessie

Reputation: 91

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!

Upvotes: 5

Views: 12201

Answers (4)

Stanisław
Stanisław

Reputation: 31

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>

Upvotes: 3

Deekshith Anand
Deekshith Anand

Reputation: 2662

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.

Upvotes: 0

pritesh
pritesh

Reputation: 2192

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.

Upvotes: 4

Mike Mathew
Mike Mathew

Reputation: 932

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.

Upvotes: 3

Related Questions