How to make compose loading Animation using HTML CSS only

July 22, 2022July 22, 2022 M-SoftTech 0 Comments

Hello viewer, welcome to m-softtech today I will teach you how to make compose loading animation using of html CSS only. I uploaded many loaders in my YouTube channel also. you can also watch that videos. and today I will make a compose loading animation.

How to Make a Resume Design using HTML CSS only

when we make a compose loader first thing what we need for that. I need one image that is rectangle shape you can see that in my loader output. then we create a div. that’s div class name is boxs you can see in code. then we make four div inside of our boxs div. that four div class name is box. then we set another class in all four box that name is box1, box2, box3, box4. now we are working our css file. we set background gradient color in our body tag. and we set our box class element with and height according to our need. and we set transition effect also and set background image. set background size also for image. then we set animation our all four boxs.

How To Make Website Using HTML & CSS only | Create Website Step By Step Using HTML CSS

HTML Source Code

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div class="boxs">
		<div class="box box1"></div>
		<div class="box box2"></div>
		<div class="box box3"></div>
		<div class="box box4"></div>
	</div>

</body>
</html>

CSS Source Code

body{background: linear-gradient(45deg, #6200ea, #d500f9);}
.boxs{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-112px, -96px);
}
.box{
  width: 96px;
  height: 112px;
  position: absolute;
  transition: all ease 0.3s;
  background: url(../image/box.png) no-repeat top center;
  background-size: 200px;
}
.box1{
  -webkit-animation: box1 1.5s ease-out infinite;
  animation: box1 1.5s ease-out infinite;

}
.box2{
  -webkit-animation: box2 1.5s ease-out infinite;
  animation: box2 1.5s ease-out infinite;
}
.box3{
  -webkit-animation: box3 1.5s ease-out infinite;
  animation: box3 1.5s ease-out infinite;
  z-index: 2;
}
.box4{
  -webkit-animation: box4 1.5s ease-out infinite;
  animation: box4 1.5s ease-out infinite;
}
@keyframes box1{
  0%, 40%{
    transform: translate(0, 0);
  }
  50%{
    transform: translate(48px, -27px);
  }
  60%, 100%{
    transform: translate(96px, 0);
  }
}

@keyframes box2{
  0%, 20%{
    transform: translate(96px, 0);
  }
  40%, 100%{
    transform: translate(144px, 27px);
  }
  
}
@keyframes box3{
  0%{
    transform: translate(144px, 27px);
  }
  20%, 60%{
    transform: translate(96px, 54px);
  }
  90%, 100%{
    transform: translate(48px, 27px);
  }
}
@keyframes box4{
  0%, 60%{
    transform: translate(48px, 27px);
  }
  90%, 100%{
    transform: translate(0, 0);
  }
  
}

Here is The Final Output