Splash Screen for your Web App
Tags: frontend, javascript, ux, uxdesign
Published: 2024-02-09 17:50:25

# 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](https://codepen.io/glorious73/pen/GReXbvV).

# 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:
```css
.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.
```html
<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`.
```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
```html
<!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](https://uxdesign.cc/building-the-perfect-splash-screen-46e080395f06).


Happy developing!