Overlay Preloader over Div using CSS

Submitted by alpha_luna on Friday, July 15, 2016 - 16:13.

If you are looking for Overlay Preloader over Div using CSS then you are at the right place. This simple web project, preloader image on Div Element commonly used when the link is clicked by the user it loads before displayed to the next content. The next content takes some time and the user will wait for the next content that they click. If you have this kind of function in your web project, displaying a loading image over your content, then you can help to those users to understand what is the data loading process.

Related Code: CSS Loading Effect

Creating Markup

<div class="body_content">
        <div class="top_loader">
                <div class="loader_rotation">
                        <img src="load1.gif" style="width:100px; height:100px;" alt="Loading..."/>
                </div>
        </div>
        <div><a href="javascript:void(0);"><h2>CSS Animation Play State</h2></a></div>
        <div><a href="javascript:void(0);"><h2>Hospital Record Management System</h2></a></div>
        <div><a href="javascript:void(0);"><h2>Responsive CSS Carousel</h2></a></div>
        <div><a href="javascript:void(0);"><h2>Contact Form in HTML, CSS, and PHP</h2></a></div>
        <div><a href="javascript:void(0);"><h2>Document Management System</h2></a></div>
        <div><a href="javascript:void(0);"><h2>CRUD and Login Registration in Codeigniter Using </h2></a></div>
    <div><a href="javascript:void(0);"><h2>Search Address Autocomplete with Link to a Map</h2></a></div>
    <div><a href="javascript:void(0);"><h2>Instagram Status Post</h2></a></div>
</div>

This is our Preloader Image

CSS Style

This simple loader image over the content div, you can use it wherever you want to overlay to have a preloading before to the next content.

.body_content {
        position: relative;
        width:52%;
        margin:auto;
}
 
.top_loader {
        position: absolute;
        left: 0; 
        top: 0; 
        right: 0; 
        bottom: 0;
        z-index: 2;
        background-color: rgba(255,255,255,0.8);
}
 
.loader_rotation {
    position: absolute;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    color: #555;
}
 
a {
        text-decoration:none;
}

Related Code: CSS Loading Effect

Hope that this tutorial will help you a lot. If you are interested in programming, we have an example of programs that may help you even just in small ways. If you want more tutorials, you can visit our website, click here. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.