Skip to main content

CSS - Fancy Full Screen Loading UI

05 Sep 2020 - Cody Merritt Anhorn

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.

Example

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>
    </div>
</div>

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

<script>
// Call window.hideLoading() anytime you want after your content is loaded
window.hideLoading = () => {
    document.getElementById('loading-overlay').classList.add("hide-loading");
};
</script>

Categories: blog

Tags: HTML CSS JavaScript


Cody Merritt Anhorn
Email: cody.anhorn@hotmail.com