• HTML
  • JavaScript

CSS - Fancy Full Screen Loading UI

This article I am just showing off a simple full screen UI I am playing around with, the main reason to have a Full Screen Loading UI is to hide loading details about your application. In my case I am hosting a Wasm application, and since it requires a hearty load of assets I wanted a Fancy loading screen to show the user when they first hit the site. Below is the HTML, CSS and JavaScript I use to show and manage the UI.

By default it will show full screen, not requiring any external files.


Checkout a live Demo here EventHorizon.Blazor.UX.

You can also checkout the source of the whole site in the canhorn/EventHorizon.Blazor.UX Github repository.

HTML for the Loading UI, place anywhere after your main content.

<div id="loading-overlay" style="color: #26dafd;
    position: absolute;
    top: 0;
    bottom: 0px;
    width: 100%;
    text-align: center;
    background-color: black;
    background-image: url(/image/background.png);
    z-index: 9999;
    <div style="display: grid; height: 100%; text-align: center; vertical-align: middle;">
        <h1 style="display: flex; flex-direction: column; place-content: flex-end;">EventHorizon Blazor.UX</h1>
        <p>The application is loading...</p>

/* This will make your loading-overlay UI transition out all fancy like */
.hide-loading {
    visibility: hidden;
    opacity: 0;
    transition: visibility 1s, opacity 1s linear;

// Call window.hideLoading() anytime you want after your content is loaded
window.hideLoading = () => {
Cody's logo image, it is an abstract of a black hole with a white Event Horizon.

Cody Merritt Anhorn

A Engineer with a passion for Platform Architecture and Tool Development.