You’ve created your Flutter web app, but it takes a moment to render in the browser—and that gives your users the impression that your app isn’t working.
The blue line indicator is added by Flutter in debug mode and is removed in the release version of your app. Even after that indicator is gone, there is still about a 1-second delay for the Flutter framework to fully boot up.
Create Loading Indicator
Create a file named styles.css in the following path: web/assets, and paste the code below. This creates a CSS loading indicator that we’ll display while the Flutter framework boots.
svg path,
svg rect {
fill: #F9BC32;
}
.spinner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Then, reference the stylesheet in your index.html file inside the <head> tag:
<link rel="stylesheet" type="text/css" href="assets/styles.css">
Now our loading indicator is ready to be shown. In the <body> tag, add the spinner:
<div class="spinner">
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="60px" height="60px" viewBox="0 0 40 40"
enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="#000"
d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946
c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946
C35.146,11.861,28.455,5.169,20.201,5.169z
M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634
c6.425,0,11.633,5.209,11.633,11.634
C31.834,26.541,26.626,31.749,20.201,31.749z" />
<path fill="#000"
d="M26.013,10.047l1.654-2.866
c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
dur="0.5s"
repeatCount="indefinite" />
</path>
</svg>
</div>
This will display the spinner in the center of your index.html page.
Hide Loading Indicator
Now, how do we hide it after the web app loads?
With the power of JavaScript, we can listen to a special Flutter event called flutter-first-frame. This event is broadcast when the first frame is rendered. At that moment, we remove the spinner from the page.
Add the following script inside the <body> tag:
<script>
window.addEventListener('flutter-first-frame', function () {
var el = document.getElementsByClassName('spinner')[0];
el.remove();
});
</script>
There are other events, but they are triggered earlier and would cause the spinner to disappear too soon. As you may have noticed, the blue bar disappears early, but our spinner remains visible until the app is actually ready.
Done!
That’s it—you now have a clean loading experience for your Flutter web app.
SOCIAL SHARE CARD GENERATOR