How to Make CSS Animation | Loading Animation

December 10, 2022December 10, 2022 M-SoftTech 0 Comments

hello viewer, welcome to m-Softech. Today I will teach you how to make a Pure CSS loading animation without using of jQuery and JavaScript.

This artical is an introduction to coding cool CSS animations using HTML and CSS. It’s meant for those who already have a good understanding of HTML and CSS.

In this CSS loading animation we Using CSS keyframes, animation delays, and CSS transforms, we’ll create a simple yet interesting CSS animation. Let’s get started!

You have already seen many types of article in web but this is totally different to other I will explain you how we will use css3 and make a loading animation. it is very simple and very attractive loading animation. and also I am providing you all source code for that loading animation.

Stagger the motion using CSS animation delay

Using the same CSS as before, set the animation-delay property to be slightly offset for each element. This instantly makes the CSS animation dramatically more interesting.

HTML CODE

<!DOCTYPE html>
<html>
<head>
	<title>CSS Loader</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="animation-wrapper">
		<div class="circle"><span>L</span></div>
		<div class="circle"><span>o</span></div>
		<div class="circle"><span>a</span></div>
		<div class="circle"><span>d</span></div>
		<div class="circle"><span>i</span></div>
		<div class="circle"><span>n</span></div>
		<div class="circle"><span>g</span></div>
	</div>

</body>
</html>

CSS Code

body{
  background: #282923;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}
.animation-wrapper{
  width: 300px;
  height: 100px;
  position: absolute;
}
.circle{
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #a2e22b;
  animation: move-the-circle 1s infinite;
  transform-origin: center center;
}
.circle span{
  position: absolute;
  top: -28px;
  font-size: 20px;
  color: white;
  font-family: cursive;
  left: 15px;
}
.circle:nth-child(1){left: 0px; animation-delay: 0.1s;}
.circle:nth-child(2){left: 30px; animation-delay: 0.2s;}
.circle:nth-child(3){left: 60px; animation-delay: 0.3s;}
.circle:nth-child(4){left: 90px; animation-delay: 0.4s;}
.circle:nth-child(5){left: 120px; animation-delay: 0.5s;}
.circle:nth-child(6){left: 150px; animation-delay: 0.6s;}
.circle:nth-child(7){left: 180px; animation-delay: 0.7s;}

@keyframes move-the-circle{
  0%{transform: translate(0, 0);}
  50%{transform: translate(0, 50px);}
  100%{transform: translate(0, 0);}
}

You Also Like This

Responsive CSS Flexible Box Layout | How To Make Flexbox Website Layout

How To Make a Resume Using HTML & CSS Only

You can Watch this video tutorial how to make CSS Loading Animation