loading animation css | box loading Animation css

 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

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 

Post a Comment

Previous Post Next Post