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.

.loader-container{
   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.

.loader{
   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">
   </span>
</div>

That’s it. Thanks for visiting.