Menu
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?
838
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>
answered Nov 01 '25 19:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With