how do you load a css spinner over a react component?

Hei,change it to:

testcomponent.js

return (
  <>
    {renderComponent}
    {this.state.isLoading && <Spinner />}
  </>
);

Spinner.js

return (
 <div className={"loader-wrapper"}>
   <div className={"loader"}>Loading...</div>
 </div>
);

Also you should modify spinner.css file: Add:

.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: rgba(255, 255, 255, 0.7);
}

Remove: from .loader remove margin

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top