How to create a translucent overlay using JavaScript in ReactJS?

Question

In ReactJS project, I have an API request and once I make it, I would like to render a translucent overlay on the current webpage with Material UI's progress indicator ( http://www.material-ui.com/#/components/circular-progress )on top of the translucent overlay, and after I get a response back, would like for the translucent overlay with the progress indicator to go away.

How can I go about doing so? Any guidance or insight would be greatly appreciated. Thank you.

Answer 1

In React, you can use the backgroundColor and RGBA css, so for example

<div style={{backgroundColor: 'rgba(0,0,0,0)'}}> ... </div>