Fullscreen Centered Loading Indicator in React Root DIV

Thu Jun 16 2022

I am putting a spinning progress image in the center of the react root div as the loading progress indicator.

html|
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Full Screen Centered Spinning</title>
    <style>
        .loading{
          display: flex;
          flex-direction: row;
          align-content: center;
          justify-content: center;
          min-height: 100vh; /* inner div to 100% screen height */
        }
    </style>
</head>
<body>
<div id="root">
    <div class="loading">
        <img alt="loading" src="images/spinner.svg" />
    </div>
</div>
</body>
</html>

ShinChven's Blog

Fullscreen Centered Loading Indicator in React Root DIV