Add Loading Indicator for Flutter Web

#flutter

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.