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 -
<img src="img/loader.gif" alt="Loading ..."/>
Step 3: Write some necessary styles for this loader -
background-color: rgba(0, 0, 0, 0.7);
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.
Subscribe to Shopnil Mahmud
Get the latest posts delivered right to your inbox