Custom Loader

How to Make a Custom Loader using CSS

Custom Loader

In this tutorial I will explain how to make a custom loader using CSS.

First, we will create a loader container that will cover the full screen horizontally and vertically using the given CSS.

   background-color: rgba(0,0,0,0.5);
   position: fixed;
   top: 0;
   z-index: 1100;
   width: 100%;
   height: 100%;

Now we will create an inner container that will contain our loader gif image.

   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   margin: 0;

Now use the HTML like this and show/hide the “.loader-container” div according to your needs.

<div class="loader-container">
   <span class="loader">
      <img src="loading.gif">

That’s it. Thanks for visiting.


I am a Full Stack Web Developer. I have more than 8 years of experience in the web design and development industry.

Leave a Reply

Your email address will not be published. Required fields are marked *