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!

Related Post(s)

» How to center anything on a wepage using CSS

» How to create a Cutout Text Effect using CSS

» How to create Text Animation using HTML and CSS

» Learn how to create Gradient Backgrounds using CSS

» How do I wrap text in a pre tag?[SOLVED]

collections_bookmark Category :: Css
date_range Published :: 6 months ago At: 01:11 AM
event_note Detailed Date :: Apr 18th, 2020
person Writer :: Code

YOU MAY LIKE THESE POSTS

share