> Markdown version of [Adding A Splash Screen](https://vaadin.com/docs/v8/framework/articles/AddingASplashScreen). Section index: [llms.txt](https://vaadin.com/docs/v8/framework/llms.txt)

# <a id="adding-a-splash-sreen"></a>Adding a splash screen

When a Vaadin application is loading a loading indicator is automatically shown so the user knows something is happening. But what if we want to show something else, like a custom splash screen for our product? Or just customize the loading indicator? Let’s have a look.

During the Vaadin bootstrap there are a couple of div elements added to the page which we can use for our custom splash screen. The DOM for a servlet application looks the like the following when starting up:

```html
<body scroll="auto" class="v-generated-body">
  <div id="splash-895866265" class="v-app splash">
    <div class="v-app-loading"></div>
    <noscript>
    You have to enable javascript in your browser to use an application built with Vaadin.
    </noscript>
  </div>
```

In this example *splash* is the name of our theme. The *v-app-loading* div is meant for styling the loading screen. It will only exist in the DOM until the widget set has been loaded and the application starts. At that point the *v-app-loading* div is removed and replaced by the actual components for the application.

Styling the loading screen is then as simple as adding some rules for *v-app-loading*, for example:

```scss
.v-generated-body &.v-app .v-app-loading {
  height: 100%;
  width: 100%;
  background-image: url(https://archive.eclipse.org/eclipse/downloads/drops/R-3.3-200706251500/whatsnew/images/splash.png);
  background-repeat: no-repeat;
  background-position: 50%;
}
```

This will use an Eclipse logo as your splash screen - change the background image to your own splash screen or redesign the css completely to your liking.

**Note that Vaadin 7.0 incorrectly does not add the theme name during bootstrap. You must therefore use a rule without the theme name, e.g. `.v-generated-body .v-app .v-app-loading` and move it out of the @mixin. You also need to ensure the v-app div has a height using `.v-app {height:100%;}`**