
How to Make a Custom Loader using CSS

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.