Menu
I have a single page webapp, which is about 300Kb big. It gets bundled with webpack and uses React/Redux.
How do I put a small loading spinner upfront until the page is loaded? I can image
348
One way would be to insert the loading animation in the index.html
e.g.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="content">
<div id="loader" />
</div>
<script src="build/app.js"></script>
</body>
</html>
Then after the bundle.js is loaded it will render in the content and the loading animation will disappear.
EDIT:
Another method is to use a progressive webapp. https://developers.google.com/web/updates/2015/10/splashscreen
However this feature might only be available in modern browsers, which is why the first approach should be used as a fallback method. The benefit however is, that if your app is offline it will still play the loading animation and can give specific error messages.
76
I also encountered with this question with one exception: I wanted to display a loading progress bar. I ended up writing a webpack plugin and a custom asset bootloader. Check out my demo project repository.
Here is the result:
41
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
