Creating A Pure CSS Preloader

Lord have mercy on Lebanon. If you have anyone in Lebanon check on them. Pray for Lebanon

Creating A Pure CSS Preloader - Source Code

It’s pretty common to see a loading state on sites these days. For this reason, I will provide you the source code for custom CSS preloader progress indicator that I made using only CSS.

You may ask your self, " Why should I need a preloader?" Well, if you have content that will take a long time to load, you should give the user feedback.

The feedback I am talking about is the preloader animations or text telling the user to wait as the server returns back the data they want.

HTML code

copy

	
<div class="container">

<div id="loader">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
 </div>

 </div>

CSS code

copy


body{
padding: 0;
margin:0;
}
.container{
display:flex;
align-items: center;
justify-content: center;
height:100vh;
background-color: #00796b;
}

#loader{
display: flex;
}

.circle{
background-color: #fff;
width:10px;
height:10px;
border-radius:50%;
margin:4px;
animation: wave 0.6s ease-in infinite;
}

.circle:nth-of-type(2) {
animation-delay: 0.1s;
}

.circle:nth-of-type(3) {
animation-delay: 0.3s;
}

.circle:nth-of-type(5) {
animation-delay: 0.4s;
}

@keyframes wave {
0%,
100% {
transform: translateY(0);
}

50% {
transform: translateY(-10px);
}
}

Well done! You now know how to build a pretty nice loading effect using nothing but a pinch of CSS. Enjoy!