How to show fullpage loader/spinner before React App finish loading

user_10426052 0
Viewed 2187

How to make fullpage loader/spinner that will load first and then will be shown until React (or different JS based framework) app fully loads.

With "fully load" I mean the moment when the browser's spinner stops spinning.

I was doing those loaders/spinners for non-js rendered websites, but I am not sure how to make them for JS-rendered apps.

How do I know when the root div is filled with fully loaded React app?

reactjs css web-applications html javascript
1 Answers

You can put a loading sign in index.html inside a div that is given to any SPA (usually root or app). This will be override as soon as full application is loaded. For example, put a following style inside the head tag of index.html.

<style>
    .loading {
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 2px solid rgba(0,0,0,.2 );
        border-radius: 50%;
        border-top-color: rgba(0,0,0,.4 );
        animation: spin 1s ease-in-out infinite;
        -webkit-animation: spin 1s ease-in-out infinite;
        left: calc(50%);
        top: calc(50%);
        position: fixed;
        z-index: 1;
        }

        @keyframes spin {
        to { -webkit-transform: rotate(360deg); }
        }
        @-webkit-keyframes spin {
        to { -webkit-transform: rotate(360deg); }
        }
</style>

And put following inside the body tag.

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="app">
        <div class="loading"></div>
    </div>
</body>
user_28470170
Related