When applications require time to load up, they usually provide a splash screen to give the user something to watch, provide feedback that the application is loading, and start building the user interface branding for the app. Blazor also has the ability to show an HTML splash screen, while the Blazor WebAssembly and possibly the .NET 5 runtime (on very first launch) get downloaded to the device.
First, we must have a Blazor project. Either open an existing Blazor project, or please follow the steps in the How-To: Create Blazor WASM Project article to create a new one. For this article, we called the project: Blazor.HowTo.
After running and debugging our app a few dozen times, we will quickly tire of looking at the basic “Loading…” message that is displayed while the Blazor app starts up. Our customers will have the same experience, when they first come to our web app.
Let’s put this startup experience to good use for our application. Open the ./wwwroot/index.html file to review the default HTML.
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
This HTML file contains a <body> segment like the one above. And, the <div id="app"> block (line #2) contains the current “Loading…” message. The content in this block gets shown while the Blazor WebAssembly loads. Once it finishes loading, this div gets replaced with the application’s home page.
But, we can replace that div content with whatever HTML content we want displayed. So, lets create a more dynamic splash screen.
First, let’s create a large application logo to show in the splash screen. Copy the logo below (named blazer-logo.png) into the Blazor.HowTo project and ./wwwroot/images folder (create that folder, if needed).
Note: you should replace and use your own application logo in this file.
Next, let’s change the index.html body <div id="app"> block to the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor.HowTo</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="Blazor.HowTo.styles.css" rel="stylesheet" />
</head>
<body>
<div id="app" style="margin: 0 auto; width: 100vw; height: 100vh">
<div class="text-center pt-3" style="color: purple; font-size: 16pt">
Loading...
</div>
<div class="text-center mt-3">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"
style="font-size: 16pt; width: 36px; height: 36px; color: purple" />
</div>
<div class="text-center">
<img src="/images/blazor-logo.png" style="width:30%" />
</div>
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
- The first div (line #15) is a container that takes up the full height and width of the browser viewport.
- The second div (lines #16-18) brings back the “Loading…” text, but in large, purple text.
- The next div (lines #19-22) renders a loader control that continuously spins while the splash screen is being displayed. This gives the user feedback that something is happening in our application. We’re not going to dive deeply into the html loader details, but for those interested read about it here.
- The final div (lines #23-25) contains a horizontally and vertically centered image of our large logo. Because our image is so large, we scaled it to 30%, but this will change depending on image size.
That’s all it takes to get the application to render a more compelling splash screen while it loads. This is still a fairly simple splash screen, but we can put any HTML/CSS layout into this section, so we can add animations, transitions, sound… our imagination and our HTML/CSS knowledge are the only limits.
Now, let’s build and debug (Ctrl+F5) our application again. We should see the following splash screen as it starts…
As we consider splash screens, here are some things to keep in mind:
- It’s easy to create this type of splash screen, so have one for all of your Blazor apps. Making people look at an empty white screen does not instill confidence in our users.
- The
<div id="app">content can be as complex and compelling an HTML fragment as we would like it to be. - This is a great place to start our application branding (color schemes, fonts, logos, etc) and flow it through the entire app.
- The screen comes and goes quickly on local installations, but when users are downloading our app over the internet, it will be shown for longer periods of time.
- Notice the layout here is all HTML and CSS, not using any Blazor component libraries. Component libraries load with the application and are not available to use at this point in the Blazor application lifecycle.
In conclusion, we have easily updated our splash screen to show a more compelling view while we wait for our application to start.
DarthPedro's Blog 