Indicate Website Loading for Flutter Web Apps 🤖

Oh! That Loading….

Step 1

File Structure

Step 2

<body>
<div id="loading_indicator" class="container">
<img class="indicator" src="./assets/loading.gif" />
</div>
.
.
.
</body>

Step 3

<style>
.container {
width: 100vw;
height: 100vh;
display: flex; /* Default Axis is X*/
justify-content: center; /* Main Axis */
align-items: center; /* Cross Axis */
}
.indicator{
width: 50vw;
}
</style>

Step 4

<body style="overflow: hidden">
.
.
</body>
window.onload = function () {
setTimeout(function () {
var loadingIndicator = document.getElementById("loading_indicator");
if (loadingIndicator) {
loadingIndicator.remove();
}
}, 10000);
};

And, We’re Done! 🙌

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Paras Jain

Paras Jain

Mobile Application and Web Developer | @Youtube Content Creator | Worship #reactjs #flutter #java #dart | youtube.com/retroportalstudio