Loading time feedback

Problem

When long-running transactions are triggered and users are expected to wait for more than 3 seconds, feedback should be provided. In addition, users should be prevented from further interacting with a given page to prevent interrupting the long-running transaction so it can complete. The wait time may not be known at the time the action is taken.

Solution

Display a loading indicator, centered on the screen overlaid with the background opacity. Once the long-running transaction is completed, the indicator should be removed.

The text displayed can be customized for the action being taken, such as uploading a file.

Code

HTML

This should be placed immediately below the page’s H1 heading. This uses the Font Awesome library - syntax may change based on the version you are using (V5 or V6).

 <div id="cn-spin-wrapper" role="status">
            <div id="spin-wrapper">
                <div id="spinner">
                    <i class="fa-brands fa-canadian-maple-leaf fa-5x fa-fade fa-fw" style="--fa-animation-duration: 2.5s; --fa-fade-opacity: 0.2;"></i>
                    <p>Please wait...</p>
                </div>
            </div>
        </div>

CSS

#spin-wrapper {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(185, 185, 185, 0.8);
    z-index: 9999;
    display: none;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cn-spin-wrapper #spinner {
    border-radius: 10px;
    position: absolute;
    color: #F00;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
    border: 3px solid #26374A;
    font-size: 1em;
    width: 200px;
    height: 200px;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(38, 55, 74, 1) 80%);
}

#cn-spin-wrapper #spinner p {
    color: #fff;
    font-size: 1.1em;
    margin-top: 20px;
    display: block;
}

Use when

An action/button or link triggers a long-running transaction expected to take 3 seconds or longer to load
Any page whereby the primary content is being loaded after the initial page load
- Examples may include tabular data or image galleries
- NOTE : A skeleton loading pattern may be a more appropriate pattern to use for smaller components on a given page to allow users to interact with other elements on the page while waiting for a portion to load

Do not use

When opening a new window
- If the new window is loading, the loading indicator should be displayed there and not on the originating link that opened the window
When opening an inline modal dialog
For navigational links (ie. return links, navigational menus, etc...)
When expected page load times are under 3 seconds
- this avoids having a loading indicator that is displayed too quickly for users to be able to see or read