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
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments