Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Reactjs / Web Applications

How To Show Fullpage Loader/spinner Before React App Finish Loading

Post a Comment
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 w

Solution 1:

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>

Post a Comment for "How To Show Fullpage Loader/spinner Before React App Finish Loading"