Overlay Preloader Image over Div using CSS


In the web project, overlay image on div is a most used feature. Assume that a page has a content list with pagination links and when the pagination link is clicked the next content is displayed instead of the previous content. To fetch the content server takes some time and user does not understand what happening behind the scene. So, if you display a loading image over the content list, it will helpful for the user to understand the data loading process.

In this article, we’ll provide a shot CSS snippet for displaying a preloader over content div. Not only for the list content, you can use it for every case where you want to overlay something on content.


.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;


<div class="content">
    <div class="overlay"><div class="overlay-content"><img src="loading.gif" alt="Loading..."/></div></div>
    <!-- Content goes here -->


  1. Aamir Khan Said...
  2. Whoami Said...

Leave a reply

CodexWorld Newsletter

Subscribe CodexWorld updates via email and get every new post delivered to your inbox.