Motivation

While all mobile applications have a standard to display a splash screen, many modern Single Page Applications don't have that. Recently, we waited for more than 5 seconds for a page to load in a company's in-house web application, and it would have been much nicer to have a splash screen.

Code

The source code can be found in Codepen.

Implementation

This part is fairly simple, we will add a blinking logo in our index.html file and once the bundle loads, the first thing it does is set the style of the logo to none and load the application. Note that the example is framework agnostic so that developers can suit it to their own needs.

1. Blinking animation

We simply need to define a keyframe that "blinks" and add it to a class in css, like so:

.app-loaded {
  display: none;
  padding: 1rem;
  font-size: 1.5rem;
}
.splash-logo {
  position: absolute;
  left: 48%;
  top: 48%;
  width: 7rem;
  height: auto;
  animation: blinker 2s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
@-webkit-keyframes blinker {
  50% {
    opacity: 0;
  }
}

2. Logo definition

It should be placed directly in the body element in index.html and given the class that has animation.

<body>
   <img class="splash-logo" src="https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" alt="logo">
   <h1 class="app-loaded">Application has loaded!</h1>
   <div id="main">
     <div id="content">
       <div id="app"></div>
     </div>
   </div>
   <!--present in most applications ⬇️-->
   <script type="module" src="/src/index.js"></script>
</body>

3. Hide the logo when the app loads

The entry function for the SPA is where it should be hidden. In this simple example, that would be a function located in index.js.

function loadApp() {
  document.querySelector(".splash-logo").style.display = "none";
  document.querySelector(".app-loaded").style.display = "block";
}

setTimeout(loadApp, 5000);

The whole thing

The following is a single html file with both style and script tags placed in it to demonstrate the functionality

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/img/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Splash Screen Example</title>
    <style>
      .app-loaded {
        display: none;
        padding: 1rem;
        font-size: 1.5rem;
      }
      .splash-logo {
        position: absolute;
        left: 48%;
        top: 48%;
        width: 7rem;
        height: auto;
        animation: blinker 2s linear infinite;
      }
      @keyframes blinker {
        50% {
          opacity: 0;
        }
      }
      @-webkit-keyframes blinker {
        50% {
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <img class="splash-logo" src="https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" alt="logo">
    <h1 class="app-loaded">Application has loaded!</h1>
    <div id="main">
      <div id="content">
        <div id="app"></div>
      </div>
    </div>
    <script>
      function loadApp() {
        document.querySelector(".splash-logo").style.display = "none";
        document.querySelector(".app-loaded").style.display = "block";
      }

      setTimeout(loadApp, 5000);
    </script>
  </body>
</html>

Credits

Image adapted from UX Design on Medium.

Happy developing!

Splash Screen for your Web App