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 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 tag: Now our loading indicator is ready to be shown. In the tag, add the spinner: This will display the spinner in the center of your index.html page. 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 tag: window.addEventListener('flutter-first-frame', function () { var el = document.getElementsByClassName('spinner')[0]; el.remove(); }); 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. That’s it—you now have a clean loading experience for your Flutter web app.