Overlay Preloader Image over Div using CSS

Preloader – When building a website, it’s common to show an image on top of a section of the page. For example, if you have a list of items with links to different pages, when you click on a link, it might take a moment for the new content to load. During this time, it can be helpful to show a loading image over the list so the user knows that the website is working.

In this article, we’ll show you how to use a simple CSS code snippet to add a loading image over a section of the page. You can use this code for any situation where you want to show an image over some content.

CSS

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

HTML Code

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

Final Output