Transparent Loading Overlay with Spinner Loader Image over DIV using CSS

In the web application, the loading overlay effect is very useful when part of the page content is loaded dynamically from the backend. Generally, a loading GIF image with an overlay background is displayed over the HTML element while fetching content from the backend. Assume that a data list is displayed on the web page with pagination links. When the pagination links are clicked, another list of data is displayed. To fetch data from the backend script, the server takes some time, and the user does not understand what is happening behind the scenes. So, if you display a loading image over the content list, it will be helpful for the user to understand the data loading process.

In this tutorial, we’ll provide a short code snippet to create an overlay element and display a preloader loading GIF over the content div using CSS. Not only for the list content, but you can also use it for every case where you want to add an overlay effect on the content and display loading animation.

Add Transparent Loading Overlay with Spinner Loader Image over DIV Element using CSS

HTML Code:
Create an HTML element to contain the overlay wrapper with a loading image.

• The transparent overlay and loader image is attached to the .overlay element.

<div class="content">
    <!-- Loader element -->
    <div class="overlay">
        <div class="overlay-content"><img src="images/loader.gif" alt="Loading..."/></div>
    </div>
    
    <!-- Page content goes here -->
</div>

CSS Code:
Define CSS code to apply styles to the overlay background and loading image over HTML element.

.content{
    position: relative;
}
.overlay{
    position: absolute;
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;
    z-index: 2;
    background-color: rgba(255,255,255,0.8);
}
.overlay-content {
    position: absolute;
    transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    color: #555;
}