/ Geeky techie

How to display a full page loader with a background using CSS

Yup, it's not a very complex fix and there are many ways to do this. I've done it differently at different times before but this one was the design requirement to one of my projects and here's how I did it -

Step 1: Download an animated GIF loader from Google of your choice. A sample can be found in this link.

Step 2: Create an HTML container for the loader in full page, place it right after opening the body tag -
<div class="fullpage-loader">
<div class="loading-position">
<img src="img/loader.gif" alt="Loading ..."/>

Step 3: Write some necessary styles for this loader -
.fullpage-loader {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000000;
display: block;
position: absolute;
.loading-position {
top: 40%;
left: 50%;
position: absolute;


Try this on your webpage, and see if it fulfills your requirement. Leave your comment if you can teach me better ways to do this.


Shopnil Mahmud

Shopnil Mahmud

A software engineer with avid interest on any form of arts and philosophy. Likes to write codes for a living and poetry for the soul. Currently residing in Toronto, originally from Bangladesh.

Read More