ShinChven's Blog

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.

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