'how do you get a pre-loader html code to work in reactjs App?

Below is the html code:

<div id="loader" class="show">
<div class="loader"></div>
</div>

It is pasted in the index.html default js component of a react app (web app) and the problem is that app just loads and loads, it never reveals the contents of the page.

javascripthtmlreactjsvisual-studio-code


Solution 1:[1]

I guess you removed the div with id="root" because react render component inside that div. So the solution is you can place it inside id="root" div in your index.html file and it will show on loading and disappear whenever your first react component renders.

<div id="root">
   <div id="loader" class="show">
      <div class="loader"></div>
   </div>
<div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions