How to do a Circular progress bar around an image ? about react-circular-progressbar

[kevinsqi]

Not sure how other folks have done it, but you can do it with absolute positioning with CSS, e.g.:

<div style={{position: 'relative', width: '100px', height: '100px'}}>
  <img style={{position: 'absolute', width: '100%', top: '10px'}} src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/3dDoge.gif" />
  <div style={{position: 'absolute'}}>
    <CircularProgressbar
      percentage={20}
      textForPercentage={null}
    />
  </div>
</div>

Result:

[kevinsqi]

I created a CodeSandbox that demonstrates creating a wrapper CustomContentProgressbar that users flexbox + absolute positioning so you can put arbitrary children (e.g. divs, img, etc) as children of CustomContentProgressbar and have the children be centered with flexbox.

Just adding this example because flexbox centering is better than the hardcoded pixel centering I did in my earlier example, and the wrapper component pattern is more reusable.

CodeSandbox: https://codesandbox.io/s/qlr7w0rm29

[AlFalahTaieb]

Love the exemple !! Thank you sir

[sjorsvanheuveln]

Is there a way to manage the image overflowing the circle?

[sjorsvanheuveln]

Found the CSS solution. Maybe nice for you to add it to the example as it would make the implementation for images easier.

Add this attribute to the styling object:
borderRadius: '50%'

It will require setting your image a bit smaller than the circle div as it just nearly doesn't fit.

[kevinsqi]

@sjorsvanheuveln yup, if you're putting in an image that covers the full width/height of the progressbar, then borderRadius: '50%' is a good idea.

[mar753]

I created a CodeSandbox that demonstrates creating a wrapper CustomContentProgressbar that users flexbox + absolute positioning so you can put arbitrary children (e.g. divs, img, etc) as children of CustomContentProgressbar and have the children be centered with flexbox.

Just adding this example because flexbox centering is better than the hardcoded pixel centering I did in my earlier example, and the wrapper component pattern is more reusable.

CodeSandbox: https://codesandbox.io/s/qlr7w0rm29

CodeSandbox is currently not compatible with IE11 (StackBlitz seems to work on IE11: https://stackblitz.com/edit/react), but this solution will not work properly with IE11. To make it work you need to add width/height to the div which wraps CircularProgressbar component as well:

<div style={{ position: "absolute", width: "100%", height: "100%"  }}>
 <CircularProgressbar {...otherProps} />
</div>