How To Create Awesome Loading animation Effect Only HTML And CSS

md selim mia January 13, 2022

 Project Introduction: In this project, we are going to implement a car running on a track using HTML and CSS with sound effects.

File structure:

  • . index.html
  • . style.css
 HTML code:  In the following code , first time open an index.html file then  create html Structure. than Inside the body tag must take a <div></div> than take a class this class name anything select than create and save this html file .

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <!--font awesome filup-->
    <link rel="stylesheet" href="css/all.css">
    <title>loading animation effect </title>
  <body>
    <div class="loading">
    </div>
  </body>
</html>


style.css: The following is the code for file “style.css” which is used in the above HTML code. 

body{
  margin: 0;
  padding: 0;
  background: #0e1538;
}
.loading{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%)rotate(75deg);
  width: 15px;
  height: 15px;
}
.loading::before,.loading::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 15px;
  height: 15px;
  border-radius: 15px;
  animation: loading 3s linear infinite;
}
.loading::before{
  box-shadow: 15px 15px white, -15px -15px #ff033e;
}
.loading::after{
  box-shadow: 15px 15px green, -15px -15px red;
  transform: translate(-50%,-50%)rotate(90deg);
}
@keyframes loading {
  50%{
    height: 45px;
  }
}

Output :  



My facebook page link:

My YouTube video:




md selim mia

Posted by md selim mia

Post a Comment

0 Comments

Ad Code

Responsive Advertisement