How to Make CSS Animation | Loading Animation

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

One thought on “How to Make CSS Animation | Loading Animation

  • March 24, 2023 at 6:25 am
    Permalink

    Right here is the right website for anyone who would like to find out about this topic. You know so much its almost hard to argue with you (not that I really will need to…HaHa). You definitely put a fresh spin on a subject which has been discussed for decades. Great stuff, just great!

    Reply

Leave a Reply

Your email address will not be published.