loading animation css | box loading Animation css

 loading animation css | box loading Animation css






Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create loading animation css  . We use HTML & CSS  for this loading animation css . Hope you enjoy our blog so let’s start with a basic HTML structure for loading animation css .


HTML code for loading animation css 
 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>loading Animation😎</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
</body>
</html>

There is all HTML code for the loading animation css   . Now, you can see output without CSS, then we write CSS for our loading animation css  .

Output

There is only white browser screen because we have only blank div and we don’t add any single line of css.


loading animation css | box loading Animation css
Output

CSS for loading animation css 

 * {  
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
width: 50px;
height: 5px;
background: linear-gradient(to right, #8e2de2, #4a00e0);
border-radius: 10px;
animation: anim 4s infinite;
position: relative;
}
.box::before {
content: "";
position: absolute;
top: 50px;
width: 5px;
height: 5px;
border-radius: 50%;
background: linear-gradient(to right, #8e2de2, #4a00e0);
animation: anim2 2s infinite;
}
.box::after {
content: "";
position: absolute;
right: 0;
bottom: 50px;
width: 5px;
height: 5px;
border-radius: 50%;
background: linear-gradient(to right, #8e2de2, #4a00e0);
animation: anim3 2s infinite;
}
@keyframes anim {
0%,
100% {
transform: rotate(0deg);
}
50% {
transform: rotate(360deg);
}
}
@keyframes anim2 {
0%,
100% {
transform: translateY();
}
50% {
transform: translateY(-45px) translateX(20px);
width: 10px;
height: 10px;
}
}
@keyframes anim3 {
0%,
100% {
transform: translateY();
}
50% {
transform: translateY(45px) translateX(-20px);
width: 10px;
height: 10px;
}
}

Now we have completed our CSS section,  Here is our updated output CSS.

output

Check it more

HTML – CSS project ideas by Code With Random

calculator Html javascript | calculator javascript code

bootstrap navbar – responsive  bootstrap navbar 

notification CSS style | Html top bar slide down notification CSS

CSS responsive menu | CSS animated Menu

countdown timer HTML javascript | free countdown timer

A Custom checkbox in CSS? | Create a custom checkbox using CSS?


Now we have completed our CSS section,  Here is our updated output with  CSSHope you like loading animation css, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a loading animation css  using simple HTML & CSS . If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Share on:

Leave a Comment